Qwen3.5-4B-3D-Coder-MTP-Repacked

Qwen3.5-4B-3D-Coder is an early-preview independent fine-tune of Qwen3.5-4B by ccore, exploring general-purpose coding and interactive 3D scene generation using self-contained Three.js HTML and JavaScript. It was trained on the MIT-licensed ccore Three.js 3D Scenes dataset, containing 4,146 examples with prompts, reasoning traces, complete code, and complexity labels. The repository includes FP16 safetensors, Q4_K_M and Q8_0 GGUF builds, and a technical report. An October 27 checkpoint reportedly improves one-shot generation and scene quality. No quantitative benchmark results are provided; evaluation is demonstrated through sample 3D scenes. Released under Apache-2.0, it includes recommended sampling settings and a Three.js-focused system prompt. LM Studio users should disable multi-token prediction. Some generations may still require retries or minor code corrections.

[!NOTE] MTP — Speculative Decoding: Yes | GGUF — Qwen3.5-4B-3D-Coder-MTP-Repacked(GGUF)

[!NOTE] Multi-Token Prediction (MTP) GGUF is a specialized GGUF model file format extension that integrates speculative decoding directly into the model weights to significantly accelerate local inference. Unlike traditional speculative decoding which requires a separate, smaller "draft" model, MTP GGUF files include additional output heads within the main model architecture that predict multiple future tokens in a single forward pass.

Model Files

MTP-Repacked [Transformers, BF16]

Run Inference (llama.cpp)

/path/to/llama.cpp/build/bin/llama-cli \
  -m /path/to/models/Qwen3.5-4B-3D-Coder-MTP.BF16.gguf \
  --spec-type draft-mtp \
  --spec-draft-n-max 2 \
  -ngl 99 \
  -c 32768 \
  --cache-type-k q8_0 \
  --seed 42 \
  -n 16384 \
  -st \
  -p "A pelican riding a bicycle along a boardwalk by the sea — the pelican pedals, the wheels spin, and seagulls circle overhead. Playful, colorful, low-poly style."

Output (llama.cpp)

Expand the dropdown to view the full output.

A pelican riding a bicycle along a boardwalk by the sea — the pelican pedals, the wheels spin, and seagulls circle overhead. Playful, colorful, low-poly style.

[Start thinking]

We need answer likely provide code? User asks scene. Need maybe create visual via HTML/CSS/JS. We need infer expected perhaps render. We can output complete HTML with stylized 3D pelican riding bicycle boardwalk sea, animation. Need no tools. Need ensure quality. Could include code block. Maybe they expect actual file? We can provide single HTML. Need comply no mention. We should craft rich scene, low-poly, colorful, animation.

Need design: ocean, boardwalk, pelican pedaling bicycle. Need model. Use primitives, maybe pelican body, head, beak, pouch, legs, wings, eyes, helmet? Bicycle wheels, frame, handlebars, pedals, chain perhaps. Boardwalk planks, posts, railing. Seagulls circle. Camera. Sky gradient via CSS or scene background/fog. Lighting, shadows. Playful.

Need code robust.

Let's make canvas full viewport. HTML with style. JS using THREE. Use renderer, scene, camera. Geometry.

Need coordinate system: bicycle travels along boardwalk perhaps x axis, sea below/right? Boardwalk extends x, z width. Pelican centered. Wheels plane XY? If bicycle travels along x, wheels rotate around z axis. Use torus geometry default in XY plane with normal z, good. Wheels at x ±1.15, y .65, z 0. Pelican straddles frame. Boardwalk top y=0. maybe wheels at y=.65. Sea y=-1.2, boardwalk y=0.

Bicycle frame: rear axle x=-1.1, front x=1.1. Frame tubes: rear drop? top tube from (-1.1,.65,0) to (-.25,1.45,0), down tube to (.2,1.05,0), seat tube to (-.25,1.45), head tube to (1.0,.65), front fork to (1.1,.65), chainstays/rear stays. Need coordinate.

Pelican body: torso around x=0 maybe, y=1.45, z=0. Pelican riding bicycle: body facing +x. Low-poly body ellipsoid scale (.65,.55,.55), head at x=.65 y=1.95, neck. Beak long along +x, orange. Pouch under beak. Eyes. Helmet perhaps blue cap. Legs to pedals. Wings flapping. Tail feathers.

Animation: pelican group bob and bob. wheels rotate z based distance/r; wheel rotation = -distance/r? Torus symmetric, spokes show. frame maybe stationary on boardwalk, pelican moves along x? If bicycle along boardwalk, could animate whole bicycle and pelican group moving x and wrap. But boardwalk finite. Better animate pelican and bike in place, pedaling, wheels spin, conveying motion; seagulls circle. User says riding bicycle along boardwalk, could move along. We can have boardwalk long x and wrap pelican x between -12 and 12, but environment repetitive. Or camera follow. Better animate whole bike/pelican slowly along boardwalk and wrap, with sea and posts. But wheel spin and pedal.

Need boardwalk length maybe 40 x, width 5 z. Planks repeated. Sea all around. If group moves x and wraps, plank sea. We can have boardwalk extends x 30, z 5. Camera at (7,4,8) looking at (0,1,0). Move pelican x from -10 to 10, wrap. But when wrap visible jump. Could instead cycle along boardwalk and camera follows? Camera target and position follow. That is good. Boardwalk long. Seagulls circle.

But if camera follows, scene relative stable. Boardwalk extends both sides. Use group bike and pelican moving x. Camera target x = bike x maybe, camera position target + offset. Then boardwalk passes. Need boardwalk long enough 40.

Animation: time, speed=.7 units/s. bikeGroup.position.x = distance. rotation.y maybe slight 0. wheels rotation.z = -distance/r. pedal crank rotation.z = distance*2? Since crank plane XY normal z. Pelican head maybe. Wings flap: left/right groups rotation.x? Wings attached sides z ±. Need geometry.

Birds: group each with body, wings, tail; circle around overhead at radius 6-10, y 5-8. Since camera follows x, circle in world x-z but if camera moves, need birds perhaps world positions relative to camera? Could place bird groups and update world positions x = cameraTarget.x + cos phaser, z=sin phaser, y. They circle around moving camera. Good. Maybe gulls white bodies, grey wings, black tips, orange beak. Low poly.

Environment:

• ocean plane y=-1.15, color teal, maybe custom shader? Could use MeshStandardMaterial and animated wave rings? Better add semi-transparent wave lines using line segments or circles. But no need.
• boardwalk: planks repeated along x, each box dimensions 1.2 x .12 x 5.2, with gaps. Boardwalk top at y=0. maybe plank center y=-.06.
• support beams and posts.
• railing maybe one side z=2.6, posts and horizontal rails. But pelican centered.
• colorful umbrellas? Could add bollards, lanterns, distant buildings? Scene should focus.
• sea and sky.
• clouds maybe simple groups of spheres.
• buoy.
• shells? no.

Need ensure low-poly style: flatShading, shadows, simple geometries. Use MeshStandardMaterial. Use random deterministic.

Could use rounded? no.

Need maybe CSS loading overlay? no.

Need include accessibility, fallback message.

Need code. Need perhaps no external assets. Use fonts system.

Let's formulate. Need ensure code syntactically correct.

Three imports: import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.module.min.js'; No OrbitControls. Custom camera.

Renderer antialias, pixel ratio min 2, shadowMap PCFSoft, toneMapping ACES, outputColorSpace SRGB. Scene background Color maybe #bfe8ff and fog. Hemisphere light, directional sun.

Materials helper standard.

Functions: mat(color, roughness=.8, metalness=0) mesh(geo, material, parent, pos, rot, scale) box etc.

Could create bicycle group: wheel = new Group position x. TorusGeometry(radius, tube, 8, 24), material dark. spokes: 8 line? Use CylinderGeometry between points. Since wheel plane XY, spokes from center to radius. Use cylinder between. Cylinder default y; function tubeBetween(a,b,r,material,parent) sets position midpoint, quaternion from y axis to direction. For wheel spokes, points in XY. Add hub cylinder along z (Cylinder default y, rotate x=pi/2). Tire torus. Maybe wheel group at x. Add torus and spokes. Need wheel rotation around z. Torus symmetric but spokes rotate.

Frame tubes use cylinderBetween. Bike group: rear wheel x=-1.05, front x=1.05, y=.62. Frame: head at (1.0,.62,0) seat tube top (-.18,1.35,0) bottom bracket (.15,.62,0) chain stays from bb to rear axle seat stays from top seat to rear axle top tube seat top to head down tube head to bb fork from head to front axle (two z ±.16 maybe). handlebar stem from head to (.95,1.25,0), handlebar across z. seat post from top to (-.18,1.55). saddle. crank at (.15,.62), chainring torus? Torus in XY. Pedals boxes. Chain maybe line/tube from rear to front.

Pelican: root group perhaps bikeRoot includes bike and pelican? Wheels spin independent. If root moves all. pelicanRoot position maybe (0,0,0). body group. Torso sphere scale. Head sphere. Neck maybe sphere. Beak: use ConeGeometry? Cone default along y. Want along +x. cone radius .18 height .8, rotate z=-pi/2? Cone points along +y? ConeGeometry centered with tip at +h/2? likely apex +y. rotate z=-pi/2 maps +y to +x. position x=1.0 relative head? Head at x=.55, beak starts .75 to 1.45. Use cone position x=1.05, y=1.98. Pouch: sphere scale (.42,.22,.3) at x=1.15,y=1.78 orange. Eyes at x=.72? Head center .55, y2.03. eyes positions x=.68, z ±.25, y2.08. Helmet: half sphere? SphereGeometry(.45,12,6,0,2pi,0,pi/2) top hemisphere, position .55,2.17, maybe. But pelican head visible. Use cap bright teal. Add brim cylinder? Cylinder axis y, not horizontal. Could use sphere flattened. Helmet top. Wing groups at z ±.42, y1.55. Each wing consists shape maybe two flattened spheres / triangles. Flapping by rotation.x. Need attach. Legs: upper/lower tubes, feet. Tail feathers behind x=-.7, y1.5, z ±.35, use flattened cones or boxes. Head and body colors: turquoise body, orange beak, cream chest, blue helmet.

Need pelican root maybe body group at x=0.05, y? Bike frame top y1.4. Pelican body center y1.55, head y2.0. legs down to pedals y.7.

Animation: const clock = new THREE.Clock(); let travel=0; function animate() { dt=min(clock.getDelta(),.05); elapsed += dt; travel += dt1.15; bikeRoot.position.x = travel; bikeRoot.rotation.y = Math.sin(elapsed.4).025; wheels.forEach(w=>w.rotation.z=-travel/.62); crank.rotation.z = travel2.4; pelicanRoot.position.y = Math.sin(elapsed1.7).025; pelicanRoot.rotation.z = ... wings left rotation.x = sin*0.55; right opposite. head maybe rotation.y. Pedal positions? crank group rotates; pedals children. camera target x = travel maybe. Since bikeRoot x travel. camera desired = (travel+2,3.2,7.5), lookAt (travel,1.2,0). Smooth. Birds update relative to camera. Sea waves: create maybe 20 line loops? Could add transparent white rings on sea, animate. But boardwalk over sea, waves under. Use TorusGeometry? horizontal ring: TorusGeometry radius, tube .02, rotate x=pi/2, y=-1.05. animate scale/opacity. Clouds groups perhaps.

Boardwalk: planks x from -18 to 18, each 1.25. Box 1.18,.12,5.4. y=-.08. Support beams under every 2 planks maybe. Posts at x every 4, z ±2.55, y=-.7, box .16,1.4,.16. Railing one side z=2.65, y .8, posts; horizontal rails. But could obstruct view from camera z=7? camera on same side as railing, bad. Put railing z=-2.65 (far side) so visible. Camera z=7 looking center, far railing behind bike. Good. Add posts and rails. Bollards along side maybe. Distant lighthouse? maybe not.

Sea plane 100x80 at y=-1.15, rotated. MeshStandard. Add wave stripes as line segments? Could use 12 circles (RingGeometry) horizontal at y=-1.13, transparent, around boardwalk. But boardwalk covers. Create wave groups with RingGeometry(1,1.08,48) rotate x=-pi/2, scale etc. Animate.

Sky: scene background, fog. Add large sun disk? sphere at (-15,12,-25), emissive. Clouds. Cloud groups with sphere low poly.

Seagulls: createBird with body sphere, head, beak, wings (boxes flattened), tail. Group. Each bird has phase, radius, speed, y. Update: x = cameraTarget.x + cos(p)*r; z=sin(p)*r; y=4.5+... rotation.y = -p? bird faces tangent. Body orientation. Could set group.rotation.y = -p maybe. Wings flap. Need bird group scale .55. At least 6.

Distant boardwalk maybe camera follows and boardwalk extends.

UI overlay title and hint. Use CSS. Maybe button "Pause ride" to interact. User didn't ask, but nice. Add small badge "PELICAN COASTAL RIDE" and controls. Button pause/resume. Also reset camera? Could include.

Need ensure no external fonts.

Potential issue camera target and birds. Fine.

Could add interaction mouse drag? We can implement simple pointer drag to look? But camera follow means no. Maybe not.

Could add "Pause ride" button.

Need maybe output only code. User asked scene, likely code. We can preface concise.

Let's craft detailed code. Need be mindful of code length but desired 5. Could be 700 lines? We can keep ~500.

Let's reason geometry and orientation.

Functions: function addMesh(parent, geo, material, pos=[0,0,0], rot=[0,0,0], scale=[1,1,1]) { const m = new THREE.Mesh; m.position.set...; m.rotation.set...; m.scale.set...; cast/receive; parent.add; return m;} function tube(parent,a,b,r,material) { const va = new THREE.Vector3(...a), vb... const dir=vb-va; len... const geo = new THREE.CylinderGeometry(r,r,len,8); const m=addMesh(... midpoint, quat setFromUnitVectors(new THREE.Vector3(0,1,0),dir.normalize())); return m; } Need if parent group and coordinates local.

Wheel: const wheel = new Group; wheel.position.set(x,.62,0); bike.add(wheel) tire torus. TorusGeometry(radius,.075,8,28) spokes tube from [0,0,0] to [cos ar, sin ar,0], radius .018. hub cylinder: CylinderGeometry(.08,.08,.34,10), rotate x=pi/2. Maybe wheel group rotation z.

Frame coordinates local bike.

Pedal crank: crank = Group pos (.15,.62,0) chainring torus radius .18 tube .025 at z=.16? Torus in XY. Crank arms tubes from origin to points. Pedals at endpoints. But rotation around z. Need one pedal on each side z ±.25, tube from 0 to [.28cos, .28sin, z]. Crank group in bike.

Pelican legs connect to crank. Pelican root maybe separate but position same. Legs endpoints local. Upper legs from body lower positions to pedal positions. We can update? If crank rotates, legs shouldn't rigidly follow. Could just animate pelican root and keep legs. But pedaling should look. We can create leg groups and update lower tubes each frame based on crank angle. More complex but doable. Crank angle = travel2.5. pedal positions for left/right: right z=.28, x=bb.x + cos(angle).28, y=bb.y+sin(angle).28. left z=-.28. pelican root local same bike coordinates. Upper leg from hip positions (-.12,1.2,z ±.25) to knee perhaps (pedal x.5, .95,z), lower to pedal. Update tube geometry each frame? We can recreate? Better use cylinders and update transforms. We can have upper/lower Mesh with unit cylinder geometry, update via setBetween function. Use cylinder geometry radius .055 height 1 and scale y length. function updateTube(mesh,a,b) position midpoint, scale.set(1,len,1), quaternion. Create upper mesh and lower mesh. hip positions maybe x=-.12,y1.18,z±.28. knee x=pedal.x*0.7, y=.95. foot pedal. Need pelican torso perhaps body root moves with bike but not crank. Fine.

Wing geometry: wingPivot group at (0,1.45,z ±.43) wing mesh sphere scale (.38,.12,.16), position x=.15, maybe rotation. For side, wing extends backward? Pelican flapping. Use two feathers as flattened spheres. Could set wingPivot.rotation.x = sin*0.65, and perhaps z. Since pivot at side, rotating x moves wing y.

Beak cone: ConeGeometry(.18,.78,10) default apex +y? Need confirm Three ConeGeometry extends CylinderGeometry radiusTop=0 radiusBottom=radius, so apex at +height/2, base at -height/2. rotate z=-pi/2 maps +y to +x yes. Position x=1.02 relative head? head center .55, beak base at .7 and tip 1.48. cone center 1.08. Pouch sphere at x=1.13, y1.78. Eyes at x=.69, y2.08, z±.25. Helmet top sphere geometry maybe SphereGeometry(.46,12,6,0,2pi,0,pi/2) creates top half from north to equator, position y2.18. Add brim using CylinderGeometry(.48,.48,.06,16) rotate z=pi/2? Cylinder axis y, to horizontal along x rotate z=pi/2. position x=.45,y2.15. But full cylinder cap brim extends both x. Fine. Head center .55,2.02. Helmet maybe covers. Neck tube from (.45,1.65) to (.58,1.93). Body center (-.1,1.5). Chest orange sphere at .25,1.43. Tail feathers at x=-.75, y1.55, z. Maybe use cone flattened? addMesh Sphere scale.

Bicycle seat at x=-.25,y1.58, saddle.

Boardwalk and bike relation: wheels bottom y=.62-.62=0, yes.

Camera initial target (0,1.2,0), camera (2.5,3.2,7.5). As travel increases, camera follows. Boardwalk extends ±22.

Clouds perhaps static world and camera follows means eventually leave. Could make clouds follow camera x too. Store cloud groups and update x = travel + base. But sun maybe.

Birds circle relative camera.

Wave rings: ring mesh material opacity; animate scale and opacity. Place x random, z random excluding boardwalk? Could be around. Need boardwalk at z 0 width 5.4, sea visible z beyond. ring radii 1-4, some intersect boardwalk but okay.

Umbrella? maybe colorful sign. Add buoy.

Add "coastal" details:

• lifebuoy torus on railing maybe.
• lamp posts.
• distant pier? no.

Need low-poly style and vibrant.

CSS: body margin0 overflow hidden background. #scene. .overlay pointer-events none. .card top left. h1. .controls pointer-events auto. button. bottom hint. Maybe title "Pelican Pedal" and subtitle. Use CSS gradient vignette via #vignette pointer-events none.

Button pause.

JS event button.

Need handle reduced motion? Could respect? But scene animation core. Not necessary.

Potential issue THREE.MathUtils.damp available. Use custom camera lerp. camera desired: const followX = travel; const desired = new THREE.Vector3(followX+1.8,3.4,7.2); const look = new THREE.Vector3(followX,1.25,0); camera.position.lerp(desired,1-Math.exp(-dt*2.5)); camera.lookAt(look.lerp(lookTarget?)); We can just lookAt(look) each frame, no smoothing target. Better lookTarget x followX, camera pos lerp. Birds positions use followX.

Cloud update x = travel + baseX.

Wave update.

Need perhaps animate pelican wing. wingL.rotation.x = 0.35 + Math.sin(elapsed*4.2)*0.45; right opposite. Head bob.

Need wheel rotation: wheel.rotation.z = -travel / .62. If wheel group local rotation, yes. Crank rotation.z = travel*2.6. Pelican root maybe pelicanRoot.position.y = Math.sin(elapsed*1.6)*.025 but legs attached to root. Bike root x travel.

Need animate seagulls wings. Bird wing pivots.

Need maybe use renderer.setAnimationLoop(animate).

Need no use Math.random unpredictable okay.

Let's write code in final with explanation. Ensure code complete.

Let's check geometry positions: Bicycle: rear wheel x=-1.08, front=1.08. frame: tube seatTop[-.2,1.38,0] to head[1.02,.62,0] top tube head to bb[.16,.62,0] down tube seatTop to bb seat tube bb to rear axle[-1.08,.62,0] chainstay tube seatTop to rear axle seatstay tube head to front axle fork. Handle stem head to [.9,1.22], bar. Seat post seatTop to[-.2,1.58]. Saddle. Crank bb. Wheel radius .62. Pelican body at x=-.05 y1.55. Legs hips x=.05? Body center -.05. Hips maybe x=.0, y1.25. crank at .16. Pedal radius .28. Fine. Head x=.55. Beak.

Pelican wings perhaps body sides.

Boardwalk plank width along x 1.25, z 5.6. Bike z 0.

Railing far side z=-2.75, y .75. posts x -18..18 every 3.6. rails tube from x -18 to18 at y .85 and1.35. Since bike y etc.

Supports.

Sea plane at y=-1.2, boardwalk bottom -.14, supports to -.95, floating above sea. Good.

Sun sphere at (-18,12,-28) maybe camera sees depending orientation. Camera looks toward -z, so background behind bike is -z, sun at -30 visible. Add.

Clouds at z -15 etc.

Distant buildings maybe simple colorful boxes along far shore z=-12, x. But boardwalk along sea, maybe shoreline. Add low-poly houses at z=-12, y .5. Could enrich. Maybe pier boardwalk extends over water, no shore. Distant lighthouse at x=-12,z=-8. But camera follows x, static world eventually. Could follow? Add to environment group that follows travel. Create distantGroup and update x travel. Houses/lighthouse. Good. Create shoreGroup with lighthouse and houses, update x=travel. But camera target moves, they pass.

Need maybe boardwalk ends? long enough 44.

Add buoy in sea x maybe -4,z4, static but camera follows eventually. Could be in environment group follow.

Let's include.

Need ensure shoreGroup added scene and update.

Birds group added scene and update relative.

Clouds groups added scene and update.

Wave ring materials each clone.

Potential issue material.opacity and transparent.

Need set renderer.shadowMap.enabled; sun shadow camera bounds.

Let's formulate final. [End thinking]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pelican Coastal Ride</title>
  <style>
    :root {
      color-scheme: light;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #bfe8ff;
    }

    #scene {
      position: fixed;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      touch-action: none;
    }

    .vignette {
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 42%, transparent 45%, rgba(12, 62, 91, 0.12) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent 25%);
    }

    .card {
      position: fixed;
      top: 22px;
      left: 22px;
      z-index: 2;
      max-width: min(360px, calc(100vw - 44px));
      padding: 16px 18px;
      color: #17364a;
      background: rgba(255, 252, 244, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 18px;
      box-shadow: 0 12px 35px rgba(21, 74, 105, 0.18);
      backdrop-filter: blur(12px);
      pointer-events: none;
    }

    .eyebrow {
      margin-bottom: 5px;
      color: #e76f51;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: clamp(23px, 4vw, 34px);
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .card p {
      margin: 9px 0 0;
      color: #527184;
      font-size: 13px;
      line-height: 1.45;
    }

    .controls {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      color: #17364a;
      background: rgba(255, 252, 244, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 999px;
      box-shadow: 0 10px 30px rgba(21, 74, 105, 0.16);
      backdrop-filter: blur(10px);
      font-size: 12px;
      font-weight: 700;
    }

    button {
      appearance: none;
      padding: 8px 12px;
      color: white;
      background: #e76f51;
      border: 0;
      border-radius: 999px;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: transform 150ms ease, background 150ms ease;
    }

    button:hover {
      transform: translateY(-1px);
      background: #d95b43;
    }

    button:active {
      transform: translateY(0);
    }

    .hint {
      position: fixed;
      left: 50%;
      bottom: 24px;
      z-index: 2;
      transform: translateX(-50%);
      padding: 8px 13px;
      color: rgba(23, 54, 74, 0.78);
      background: rgba(255, 255, 255, 0.55);
      border-radius: 999px;
      font-size: 11px;
      letter-spacing: 0.02em;
      pointer-events: none;
      white-space: nowrap;
    }

    @media (max-width: 640px) {
      .card {
        top: 12px;
        left: 12px;
        padding: 13px 15px;
      }

      .card p {
        display: none;
      }

      .controls {
        right: 12px;
        bottom: 12px;
      }

      .hint {
        display: none;
      }
    }
  </style>
</head>
<body>
  <canvas id="scene" aria-label="Animated pelican riding a bicycle on a seaside boardwalk"></canvas>
  <div class="vignette"></div>

  <section class="card">
    <div class="eyebrow">Seaside Adventure</div>
    <h1>Pelican Pedal</h1>
    <p>A colorful pelican cruises the boardwalk while seagulls circle above.</p>
  </section>

  <div class="controls">
    <span>Click to pause the ride</span>
    <button id="pauseButton" type="button">Pause</button>
  </div>

  <div class="hint">Drag to explore · The boardwalk goes on forever</div>

  <script type="module">
    import * as THREE from
      "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.module.min.js";

    const canvas = document.querySelector("#scene");
    const pauseButton = document.querySelector("#pauseButton");

    const renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: true,
      powerPreference: "high-performance"
    });

    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.08;

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xbfe8ff);
    scene.fog = new THREE.Fog(0xbfe8ff, 24, 72);

    const camera = new THREE.PerspectiveCamera(
      42,
      window.innerWidth / window.innerHeight,
      0.1,
      150
    );

    const hemi = new THREE.HemisphereLight(0xdff5ff, 0x4d7c67, 2.25);
    scene.add(hemi);

    const sun = new THREE.DirectionalLight(0xfff1c9, 3.2);
    sun.position.set(-8, 14, 9);
    sun.castShadow = true;
    sun.shadow.mapSize.set(2048, 2048);
    sun.shadow.camera.left = -18;
    sun.shadow.camera.right = 18;
    sun.shadow.camera.top = 18;
    sun.shadow.camera.bottom = -18;
    sun.shadow.camera.near = 1;
    sun.shadow.camera.far = 45;
    sun.shadow.bias = -0.00035;
    scene.add(sun);

    const fill = new THREE.DirectionalLight(0x8ed8ff, 0.65);
    fill.position.set(10, 5, -10);
    scene.add(fill);

    const standard = (color, roughness = 0.82, metalness = 0) =>
      new THREE.MeshStandardMaterial({ color, roughness, metalness });

    const materials = {
      plank: standard(0xe9c98b),
      plankDark: standard(0xc99b5d),
      beam: standard(0x506c68),
      post: standard(0x46665e),
      rail: standard(0x375c58),
      tire: standard(0x263740),
      metal: standard(0x8fa4a5, 0.45, 0.35),
      darkMetal: standard(0x334b50, 0.5, 0.25),
      orange: standard(0xf17a45),
      yellow: standard(0xffcf54),
      teal: standard(0x35b8ad),
      blue: standard(0x388fd1),
      cream: standard(0xfff1c8),
      red: standard(0xe65b55),
      green: standard(0x65bd78),
      skin: standard(0xf5c98d),
      wing: standard(0xf6f2df),
      gull: standard(0xf8f5e9),
      gullDark: standard(0x3f5357)
    };

    function addMesh(parent, geometry, material, position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1]) {
      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.set(...position);
      mesh.rotation.set(...rotation);
      mesh.scale.set(...scale);
      mesh.castShadow = true;
      mesh.receiveShadow = true;
      parent.add(mesh);
      return mesh;
    }

    function tube(parent, a, b, radius, material, radialSegments = 8) {
      const start = new THREE.Vector3(...a);
      const end = new THREE.Vector3(...b);
      const direction = end.clone().sub(start);
      const length = direction.length();

      const mesh = addMesh(
        parent,
        new THREE.CylinderGeometry(radius, radius, length, radialSegments),
        material
      );

      mesh.position.copy(start).add(end).multiplyScalar(0.5);
      mesh.quaternion.setFromUnitVectors(
        new THREE.Vector3(0, 1, 0),
        direction.normalize()
      );

      return mesh;
    }

    function updateTube(mesh, a, b) {
      const start = new THREE.Vector3(...a);
      const end = new THREE.Vector3(...b);
      const direction = end.clone().sub(start);
      const length = direction.length();

      mesh.position.copy(start).add(end).multiplyScalar(0.5);
      mesh.scale.set(1, length, 1);
      mesh.quaternion.setFromUnitVectors(
        new THREE.Vector3(0, 1, 0),
        direction.normalize()
      );
    }

    // Ocean
    const ocean = addMesh(
      scene,
      new THREE.PlaneGeometry(120, 90),
      standard(0x2d9eb4, 0.72),
      [0, -1.22, 0],
      [-Math.PI / 2, 0, 0]
    );
    ocean.castShadow = false;

    const waveMaterial = new THREE.MeshBasicMaterial({
      color: 0xbcefff,
      transparent: true,
      opacity: 0.28,
      depthWrite: false,
      side: THREE.DoubleSide
    });

    const waves = [];
    for (let i = 0; i < 24; i++) {
      const wave = addMesh(
        scene,
        new THREE.RingGeometry(0.85, 0.91, 40),
        waveMaterial.clone(),
        [
          (Math.random() - 0.5) * 70,
          -1.19,
          (Math.random() - 0.5) * 55
        ],
        [-Math.PI / 2, 0, 0],
        [1, 1, 1]
      );
      wave.castShadow = false;
      wave.receiveShadow = false;
      waves.push({
        mesh: wave,
        phase: Math.random() * Math.PI * 2,
        speed: 0.18 + Math.random() * 0.22
      });
    }

    // Boardwalk
    const boardwalk = new THREE.Group();
    scene.add(boardwalk);

    for (let x = -21; x <= 21; x += 1.25) {
      const plankMaterial = Math.random() > 0.88 ? materials.plankDark : materials.plank;
      addMesh(
        boardwalk,
        new THREE.BoxGeometry(1.19, 0.14, 5.55),
        plankMaterial,
        [x, -0.07, 0]
      );
    }

    for (let x = -18; x <= 18; x += 3.6) {
      addMesh(boardwalk, new THREE.BoxGeometry(0.16, 1.5, 0.16), materials.post, [x, -0.75, -2.65]);
      addMesh(boardwalk, new THREE.BoxGeometry(0.16, 1.5, 0.16), materials.post, [x, -0.75, 2.65]);
    }

    for (let x = -18; x <= 18; x += 3.6) {
      addMesh(boardwalk, new THREE.BoxGeometry(0.18, 0.2, 5.4), materials.beam, [x, -1.0, 0]);
    }

    // Far-side railing
    for (let x = -18; x <= 18; x += 3.6) {
      addMesh(boardwalk, new THREE.BoxGeometry(0.14, 1.15, 0.14), materials.rail, [x, 0.58, -2.72]);
    }

    tube(boardwalk, [-18, 1.05, -2.72], [18, 1.05, -2.72], 0.055, materials.rail);
    tube(boardwalk, [-18, 0.62, -2.72], [18, 0.62, -2.72], 0.045, materials.rail);

    // Distant shoreline group
    const shore = new THREE.Group();
    scene.add(shore);

    addMesh(
      shore,
      new THREE.CylinderGeometry(0.55, 0.72, 3.8, 10),
      materials.yellow,
      [-11, 0.8, -9]
    );
    addMesh(
      shore,
      new THREE.CylinderGeometry(0.62, 0.62, 0.18, 10),
      materials.cream,
      [-11, 2.8, -9]
    );
    addMesh(
      shore,
      new THREE.CylinderGeometry(0.08, 0.08, 1.2, 6),
      materials.darkMetal,
      [-11, 3.55, -9]
    );

    const houseColors = [materials.red, materials.blue, materials.green, materials.orange];
    for (let i = 0; i < 7; i++) {
      const house = addMesh(
        shore,
        new THREE.BoxGeometry(1.8 + Math.random(), 1.2, 1.5),
        houseColors[i % houseColors.length],
        [-16 + i * 2.5, 0.55, -13 - Math.random() * 2]
      );
      house.rotation.y = (Math.random() - 0.5) * 0.2;
    }

    // Buoy
    const buoy = new THREE.Group();
    buoy.position.set(-4, -1.1, 5);
    scene.add(buoy);

    addMesh(buoy, new THREE.CylinderGeometry(0.28, 0.4, 0.65, 10), materials.orange, [0, 0, 0]);
    addMesh(buoy, new THREE.SphereGeometry(0.12, 8, 6), materials.cream, [0, 0.42, 0]);
    addMesh(buoy, new THREE.ConeGeometry(0.3, 0.35, 8), materials.yellow, [0, 0.72, 0]);

    // Bicycle
    const bike = new THREE.Group();
    scene.add(bike);

    const wheelRadius = 0.62;

    function createWheel(x) {
      const wheel = new THREE.Group();
      wheel.position.set(x, wheelRadius, 0);
      bike.add(wheel);

      addMesh(
        wheel,
        new THREE.TorusGeometry(wheelRadius, 0.075, 8, 30),
        materials.tire
      );

      for (let i = 0; i < 10; i++) {
        const angle = (i / 10) * Math.PI * 2;
        tube(
          wheel,
          [0, 0, 0],
          [Math.cos(angle) * wheelRadius, Math.sin(angle) * wheelRadius, 0],
          0.014,
          materials.metal,
          5
        );
      }

      addMesh(
        wheel,
        new THREE.CylinderGeometry(0.08, 0.08, 0.38, 10),
        materials.darkMetal,
        [0, 0, 0],
        [Math.PI / 2, 0, 0]
      );

      return wheel;
    }

    const rearWheel = createWheel(-1.08);
    const frontWheel = createWheel(1.08);

    const seatTop = [-0.2, 1.38, 0];
    const headTop = [1.02, 0.62, 0];
    const bottomBracket = [0.16, 0.62, 0];
    const rearAxle = [-1.08, 0.62, 0];
    const frontAxle = [1.08, 0.62, 0];

    tube(bike, seatTop, headTop, 0.055, materials.metal);
    tube(bike, headTop, bottomBracket, 0.065, materials.metal);
    tube(bike, seatTop, bottomBracket, 0.05, materials.metal);
    tube(bike, bottomBracket, rearAxle, 0.035, materials.darkMetal);
    tube(bike, seatTop, rearAxle, 0.035, materials.darkMetal);
    tube(bike, headTop, frontAxle, 0.045, materials.metal, 6);

    tube(bike, [1.02, 0.62, 0], [0.9, 1.22, 0], 0.04, materials.darkMetal);
    tube(bike, [0.9, 1.22, -0.34], [0.9, 1.22, 0.34], 0.035, materials.darkMetal);
    tube(bike, [0.9, 1.22, -0.26], [0.82, 1.38, -0.26], 0.025, materials.darkMetal);
    tube(bike, [0.9, 1.22, 0.26], [0.82, 1.38, 0.26], 0.025, materials.darkMetal);

    tube(bike, seatTop, [-0.2, 1.58, 0], 0.035, materials.darkMetal);

    addMesh(
      bike,
      new THREE.BoxGeometry(0.48, 0.12, 0.34),
      materials.darkMetal,
      [-0.2, 1.6, 0]
    );

    // Crank and pedals
    const crank = new THREE.Group();
    crank.position.copy(bottomBracket);
    bike.add(crank);

    addMesh(
      crank,
      new THREE.TorusGeometry(0.19, 0.025, 6, 20),
      materials.metal,
      [0, 0, 0.16]
    );

    const pedalPositions = [
      { z: 0.28 },
      { z: -0.28 }
    ];

    pedalPositions.forEach((pedal, index) => {
      tube(
        crank,
        [0, 0, 0],
        [Math.cos(index * Math.PI) * 0.28, Math.sin(index * Math.PI) * 0.28, pedal.z],
        0.025,
        materials.darkMetal
      );

      addMesh(
        crank,
        new THREE.BoxGeometry(0.28, 0.08, 0.16),
        materials.darkMetal,
        [Math.cos(index * Math.PI) * 0.28, Math.sin(index * Math.PI) * 0.28, pedal.z]
      );
    });

    // Pelican
    const pelican = new THREE.Group();
    bike.add(pelican);

    const body = addMesh(
      pelican,
      new THREE.SphereGeometry(0.58, 14, 10),
      materials.teal,
      [-0.08, 1.53, 0],
      [0, 0, 0],
      [1.15, 0.95, 0.9]
    );

    addMesh(
      pelican,
      new THREE.SphereGeometry(0.45, 12, 8),
      materials.orange,
      [0.28, 1.43, 0],
      [0, 0, 0],
      [1.05, 0.72, 0.88]
    );

    addMesh(
      pelican,
      new THREE.CylinderGeometry(0.22, 0.3, 0.48, 10),
      materials.teal,
      [0.47, 1.7, 0]
    );

    addMesh(
      pelican,
      new THREE.SphereGeometry(0.46, 14, 10),
      materials.teal,
      [0.55, 2.02, 0],
      [0, 0, -0.08]
    );

    // Helmet
    addMesh(
      pelican,
      new THREE.SphereGeometry(0.47, 14, 7, 0, Math.PI * 2, 0, Math.PI / 2),
      materials.blue,
      [0.55, 2.15, 0]
    );

    addMesh(
      pelican,
      new THREE.CylinderGeometry(0.49, 0.49, 0.055, 16),
      materials.blue,
      [0.47, 2.13, 0],
      [0, 0, Math.PI / 2]
    );

    // Beak and throat pouch
    addMesh(
      pelican,
      new THREE.ConeGeometry(0.19, 0.82, 10),
      materials.orange,
      [1.08, 2.02, 0],
      [0, 0, -Math.PI / 2]
    );

    addMesh(
      pelican,
      new THREE.SphereGeometry(0.4, 12, 8),
      materials.orange,
      [1.13, 1.82, 0],
      [0, 0, -0.12],
      [1.25, 0.55, 0.82]
    );

    // Eyes
    addMesh(
      pelican,
      new THREE.SphereGeometry(0.075, 10, 7),
      materials.cream,
      [0.73, 2.12, 0.245]
    );
    addMesh(
      pelican,
      new THREE.SphereGeometry(0.075, 10, 7),
      materials.cream,
      [0.73, 2.12, -0.245]
    );

    addMesh(
      pelican,
      new THREE.SphereGeometry(0.045, 8, 6),
      materials.darkMetal,
      [0.755, 2.14, 0.255]
    );
    addMesh(
      pelican,
      new THREE.SphereGeometry(0.045, 8, 6),
      materials.darkMetal,
      [0.755, 2.14, -0.255]
    );

    // Tail feathers
    for (const side of [-1, 1]) {
      addMesh(
        pelican,
        new THREE.SphereGeometry(0.28, 8, 5),
        materials.teal,
        [-0.72, 1.62, side * 0.22],
        [0, 0, side * 0.18],
        [0.75, 0.22, 0.28]
      );
    }

    // Flapping wings
    const leftWing = new THREE.Group();
    const rightWing = new THREE.Group();
    leftWing.position.set(-0.05, 1.48, 0.43);
    rightWing.position.set(-0.05, 1.48, -0.43);
    pelican.add(leftWing, rightWing);

    addMesh(
      leftWing,
      new THREE.SphereGeometry(0.36, 10, 6),
      materials.wing,
      [0.18, 0, 0],
      [0, 0, 0],
      [1.25, 0.22, 0.42]
    );

    addMesh(
      rightWing,
      new THREE.SphereGeometry(0.36, 10, 6),
      materials.wing,
      [0.18, 0, 0],
      [0, 0, 0],
      [1.25, 0.22, 0.42]
    );

    // Pelican legs
    const legMeshes = [];

    pedalPositions.forEach((pedal, index) => {
      const upper = addMesh(
        pelican,
        new THREE.CylinderGeometry(0.055, 0.065, 1, 8),
        materials.teal
      );

      const lower = addMesh(
        pelican,
        new THREE.CylinderGeometry(0.045, 0.055, 1, 8),
        materials.teal
      );

      legMeshes.push({ upper, lower, pedal, hip: [0.02, 1.22, pedal.z], knee: [0, 0.95, pedal.z] });
    });

    // Seagulls
    const gulls = [];

    function createGull(index) {
      const gull = new THREE.Group();
      scene.add(gull);

      addMesh(
        gull,
        new THREE.SphereGeometry(0.23, 10, 7),
        materials.gull,
        [0, 0, 0],
        [0, 0, -0.2],
        [1.15, 0.8, 0.8]
      );

      addMesh(
        gull,
        new THREE.SphereGeometry(0.13, 8, 6),
        materials.gull,
        [0.23, 0.04, 0],
        [0, 0, -0.2]
      );

      addMesh(
        gull,
        new THREE.ConeGeometry(0.055, 0.22, 6),
        materials.yellow,
        [0.36, 0.04, 0],
        [0, 0, -Math.PI / 2]
      );

      const leftWing = new THREE.Group();
      const rightWing = new THREE.Group();
      leftWing.position.set(-0.02, 0.05, 0.16);
      rightWing.position.set(-0.02, 0.05, -0.16);
      gull.add(leftWing, rightWing);

      addMesh(
        leftWing,
        new THREE.BoxGeometry(0.62, 0.06, 0.18),
        materials.wing,
        [-0.28, 0, 0],
        [0, 0, 0],
        [1.4, 0.35, 0.75]
      );

      addMesh(
        rightWing,
        new THREE.BoxGeometry(0.62, 0.06, 0.18),
        materials.wing,
        [-0.28, 0, 0],
        [0, 0, 0],
        [1.4, 0.35, 0.75]
      );

      gulls.push({
        group: gull,
        leftWing,
        rightWing,
        phase: index * 1.37,
        radius: 5.5 + index * 0.75,
        speed: 0.13 + index * 0.018,
        height: 4.8 + index * 0.42,
        scale: 0.62 + index * 0.05
      });
    }

    for (let i = 0; i < 7; i++) createGull(i);

    // Soft clouds
    const clouds = [];
    const cloudMaterial = standard(0xffffff, 0.95);

    function createCloud(index) {
      const cloud = new THREE.Group();
      const baseX = (Math.random() - 0.5) * 50;
      const baseZ = -16 - Math.random() * 18;

      for (let i = 0; i < 5; i++) {
        addMesh(
          cloud,
          new THREE.SphereGeometry(1.1 + Math.random() * 0.8, 10, 7),
          cloudMaterial,
          [(i - 2) * 1.15, Math.sin(i * 1.7) * 0.35, (Math.random() - 0.5) * 0.8],
          [0, 0, 0],
          [1.4, 0.55, 0.8]
        );
      }

      cloud.position.set(baseX, 7 + Math.random() * 3, baseZ);
      scene.add(cloud);
      clouds.push({ group: cloud, baseX, baseZ });
    }

    for (let i = 0; i < 8; i++) createCloud(i);

    // Sun
    addMesh(
      scene,
      new THREE.SphereGeometry(2.1, 16, 12),
      new THREE.MeshBasicMaterial({ color: 0xfff1b0 }),
      [-18, 12, -31]
    );

    // Camera follow
    const cameraTarget = new THREE.Vector3();
    const desiredCameraPosition = new THREE.Vector3();
    const cameraLook = new THREE.Vector3();

    function updateCamera(dt) {
      const followX = bike.position.x;

      desiredCameraPosition.set(followX + 1.7, 3.45, 7.4);
      cameraLook.set(followX, 1.25, 0);

      camera.position.lerp(desiredCameraPosition, 1 - Math.exp(-dt * 2.8));
      camera.lookAt(cameraLook);
    }

    // Animation state
    let travel = 0;
    let elapsed = 0;
    let paused = false;
    const clock = new THREE.Clock();

    pauseButton.addEventListener("click", () => {
      paused = !paused;
      pauseButton.textContent = paused ? "Resume" : "Pause";
    });

    function animate() {
      const dt = Math.min(clock.getDelta(), 0.05);
      if (!paused) {
        elapsed += dt;
        travel += dt * 1.05;
      }

      bike.position.x = travel;
      rearWheel.rotation.z = -travel / wheelRadius;
      frontWheel.rotation.z = -travel / wheelRadius;
      crank.rotation.z = travel * 2.55;

      pelican.position.y = Math.sin(elapsed * 1.65) * 0.025;
      pelican.rotation.z = Math.sin(elapsed * 1.1) * 0.018;
      pelican.rotation.y = Math.sin(elapsed * 0.7) * 0.025;

      const flap = Math.sin(elapsed * 4.2);
      leftWing.rotation.x = 0.25 + flap * 0.48;
      rightWing.rotation.x = 0.25 - flap * 0.48;
      leftWing.rotation.z = flap * 0.08;
      rightWing.rotation.z = -flap * 0.08;

      legMeshes.forEach(({ upper, lower, pedal, hip, knee }) => {
        const angle = crank.rotation.z;
        const x = pedal.z * 0.72;
        const y = 0.91 + Math.sin(angle + Math.PI / 2) * 0.08;

        updateTube(upper, hip, [x * 0.68, y, pedal.z]);
        updateTube(lower, [x * 0.68, y, pedal.z], [x, pedal.y, pedal.z]);
      });

      gulls.forEach((gull, index) => {
        const phase = elapsed * gull.speed + gull.phase;
        const radius = gull.radius;

        gull.group.position.set(
          bike.position.x + Math.cos(phase) * radius,
          gull.height + Math.sin(phase * 2) * 0.35,
          Math.sin(phase) * radius
        );

        gull.group.rotation.y = -phase + Math.PI / 2;
        gull.group.rotation.z = Math.sin(phase) * 0.08;

        const wingFlap = Math.sin(phase * 3.2) * 0.42;
        gull.leftWing.rotation.x = wingFlap;
        gull.rightWing.rotation.x = -wingFlap;
        gull.group.scale.setScalar(gull.scale);
      });

      clouds.forEach(({ group, baseX, baseZ }) => {
        group.position.x = travel + baseX;
      });

      waves.forEach((wave) => {
        const t = elapsed * wave.speed + wave.phase;
        const scale = 0.8 + (t % 2.4) * 0.16;
        wave.mesh.scale.set(scale, scale, scale);
        wave.mesh.material.opacity = 0.16 + (t % 1.2) * 0.12;
      });

      updateCamera(dt);
      renderer.render(scene, camera);
    }

    window.addEventListener("resize", () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    });

    updateCamera(1);
    renderer.setAnimationLoop(animate);
  </script>
</body>
</html>

[ Prompt: 226.3 t/s | Generation: 169.3 t/s ]

Exiting...

[Prompt: 226.3 t/s | Generation: 169.3 t/s] - Generated with full GPU offloading on an NVIDIA RTX PRO 6000 Blackwell Server Edition using MTP (draft-n-max: 2). GGUF: Qwen3.5-4B-3D-Coder-MTP.BF16.gguf

llama.cpp

LLM inference in C/C++ — https://github.com/ggml-org/llama.cpp

MTP-repackaged and quantized using llama.cpp by — prithivMLmods.