
Claude mascot loop on animation principles
An 8-second square 3D loop: the voxel Claude mascot hops along a timeline slab under studio lights while a list ticks through five animation principles. Claude Opus 5.5 made it from a prompt file the creator shared, with fixes and a sound prompt.
Build a 3D animation-principles loop. One HTML file, three.js 0.160.0 via jsDelivr importmap, Geist Mono from Google Fonts. 1080x1080, 8 s at 60 fps (480 frames), frame 480 equals frame 0. window.renderAt(t) draws any frame from t alone; seeded random only. Set: a miniature studio. A floating white 12x6 slab on an F4F2EE backdrop. Its top is a timeline: 3 tracks of 0.25 frame cells (EFEEEA), a ruler with frame numbers, 5 keyframe diamonds 2 units apart on the middle track (white fill, 0F0F0F outline). Around it on stands: a key softbox, a rim strip light, a top spot on a boom. Hero: the pixel Claude mascot as 0.1 voxels: D97757 body 14x10x8, two 3x2 arms, four 2x3 legs, 0F0F0F 2x3 eyes; roughness 0.45, clearcoat 0.3. Lights, 0 to 1 s: key 3200 K with soft shadows at 0.1 s, rim 7500 K at 0.4 s, top spot 5000 K at 0.7 s. Each clicks on with a 3-frame flicker, and the mascot's eyes glance at it. Hops, 1 to 5 s: 4 hops to diamonds 2 to 5, landing on frames 105, 165, 225 and 285. Each hop: 11-frame crouch (1.2x0.75), stretch 0.85x1.28 at takeoff, 25 frames of air, squash 1.25x0.7 on landing, spring back at damping 0.55; arms lag 4 frames, legs 6. Each landing lights its diamond FF6A2B, ripples the cells 0.08 high and throws 12 voxel sparks. An FF6A2B playhead carrying a point light moves at constant speed and crosses each diamond on its landing frame. Flip, 5 to 6.4 s: a dotted arc from diamond 5 back to diamond 1 draws in, then an 18-frame deep crouch and a 360° flip along the arc, 3.5 high, landing on frame 384 while the playhead rewinds under it. Labels, top left, Geist Mono 28 px: a checklist 01 ANTICIPATION, 02 SQUASH & STRETCH (& in D97757), 03 OVERLAPPING ACTION, 04 FOLLOW-THROUGH, 05 ARCS, in 8E8A83. Each row turns 0F0F0F and fills its FF6A2B diamond on its exact frame: 69 (first crouch), 140 (stretch), 200 (limbs trail), 285 (arms settle), 303 (arc draws). End: hold, blink at 7.2 s; on frame 468 the lights, diamonds and labels snap off. Camera: FOV 18, 30° elevation, ±10° orbit over 8 s, 25% push-in tracking the hops, 4% punch-in on the flip landing. Post: bloom on emissives, depth of field focused on the mascot, 2% grain, 10% vignette, dithered backdrop.
1. The render is washed out and cramped. Grade so the lit front face reads D97757 and lit diamonds read FF6A2B; drop the fill so lights-off sits near 50% and each click is obvious; lower the key to 28 degrees from the front right and put the cool rim at the back left so it edges the side we see. Pull the wide shot back to 44 units so the whole floating slab and all three stands are in frame, add a soft shadow under the slab, and make sparks 0.075 to 0.12 and ruler numbers bigger. 2. Frame check fixes. Keep every prop out of the label block: track the hops at 45% and hang the top spot at 5.8 on a boom from the back right corner, above the flip. Light each lit diamond with a soft glow from its face, move the playhead light to the front edge of the track and run its line under the diamonds. Start the dotted arc above the mascot's head, keep every tripod foot on the slab, and give the arms a bigger, slower settle (2.2 Hz, damping 0.22) so the follow-through reads. 3. Turn the rim strip's panel toward the camera so its click reads. 4. Make the top spot's click read too: narrow it to a 34 degree pool at 45 cd and give the lamp a glowing lens rim.
Score this 8 s loop, 480 frames at 60 fps. Synthesize everything in code with the Web Audio API, no samples, no downloads. 120 BPM, 4 bars, F major. Each hit lands 1 frame after its visual event. Bed: pad voices A3 E4 (key light), C5 (top), G5 (rim), each following its light's flicker. Shaker 8ths from 45, kick and bass from 60, roots F D Bb F by bar; kick and shaker rest 330 to 420, bass holds C, then F at 384. Clicks: lights 6, 24, 42, off 468. Crouches 69, 129, 189, 249, 312: creak, inhale riser. Takeoffs 80, 140, 200, 260, 330: upward swish. Landings 105, 165, 225, 285, 384: rubber squash pitched by the squash scale, spark tings, 384 biggest. Label pings A5 C6 D6 F6 A6: 69, 140, 200, 285, 303. Dot ticks 303 to 318, flip whoosh 330 to 384, blink blip 432. 48 kHz stereo WAV, about -14 LUFS, peak -1 dBTP, seamless loop, mux into the MP4.
Make it yours. Swap "the pixel Claude mascot as 0.1 voxels" for your own character, and change the five principles on the timeline to the ideas you want to teach.
How it was made
The shared file holds the main prompt, four numbered follow-up fixes, and a separate sound prompt, in that order.
Claude Opus 5.5 · Three.js · Web Audio API
Source and credit
X · Oct 10, 2026 · 6.6k likes · 653k views · 80 comments
Made with AI, according to the source
Published instructions: Google Drive file linked in a creator reply ("Opus 5.5 exact prompt")
Look notesby Reference
A clean studio miniature: an orange voxel mascot steps along a white timeline slab while a numbered list of animation principles fills in at the top left.
- Color
- Warm off-white backdrop and slab, terracotta orange for the mascot and lit keyframe tiles, near-black outlines, eyes and tripods, and soft amber glows.
- Type
- Small uppercase monospace labels ("01 ANTICIPATION" to "05 ARCS") with diamond bullets that turn orange, plus tiny orange frame-number flags above the mascot.
- Framing
- Square frame. A floating slab seen from a high three-quarter angle runs diagonally across the lower two-thirds, with a softbox, a strip light and a boom spot on stands around it and the principle list in the top-left corner.
- Structure
- Lights on the empty slab, the mascot crouching and hopping from tile to tile as each principle lights up, a dotted arc for a flip in the air, then a landing back near the start.





























