Frame from Claude mascot loop on animation principles

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.

1. PromptFull
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.
2. Follow-up fixes
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.
3. Sound prompt
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.

Make it hereFree runs soon
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")

Prompt file

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.

Remakes

Nobody has shared a remake of this one yet. Made your own version? Send it for review and credit.

More like this

0:09

Isometric 3D cards: Design, Build, Ship

Partial prompt · HyperFrames

0:45

Watercolor Showa-era alley as a 3D diorama

Partial prompt · Opus 5.5 · Three.js

0:08

Low-poly horse loop across GPT-6.1 levels

GPT-6.1 Sol · Three.js

0:38

Trailer for a Minecraft wizardry mod

Claude Code · Three.js

0:08

Low-poly 3D horse at five effort levels

Cursor · Three.js

0:10

Late-night laundromat built in Blender

Partial prompt · Claude Code · Blender

1:13

Colosseum built from 44,754 parts

Prompt described · Fable 5.5

1:38

3D tour of an AI data centre

Opus 5.5 · HTML

Low-poly elf swordsman, Sol vs Opus

Partial prompt · Claude Code · Blender

0:10

Looping 3D pelican on a bike at sunset

atomic.chat · Blender

0:08

Market Street in 1906, rebuilt in 3D

Claude Tag · Blender

0:18

A world built from stone wedges

@wafflexo (preset curator)

0:32

Candy forest and violet reef

Yambo Studio

0:08

Quantum processor in layered silver

Found Studio

0:04

A tunnel of luminous processor modules

Found Studio

0:11

Playful 3D gifts for livestreams

BUCK

0:07

Metallic symbols in geometric worlds

Ordinary Folk

0:05

Spheres in luminous geometric spaces

Ordinary Folk

0:44

Geometric toy marching band

Animade

0:15

Arcane-style painterly 3D shot of a moth

Opus 5.5 · Blender

0:38

Photoreal pelican cycling down a pier

Opus 5.5 · Custom GPU ray marcher

0:43

Demoscene film from a single HTML file

Claude Code · WebGL2

0:18

Infinite solarpunk city shader

Claude Cowork · GLSL

3D short film about a rooftop date

Opus 5.5 · Three.js

6:53

Code-drawn character in six art styles

Claude Code · HyperFrames

0:16

Showreel of type, form, space and time

Opus 5.5 · HyperFrames

1:16

Indian civilisation as a motion showreel

Claude Code · Three.js

0:48

3D promo for a travel-tracking app

Claude Code · Remotion

5:06

Animated UMAP explainer for undergraduates

Claude Code

0:24

Speaker carousel promo for UDC 2026

Partial prompt · Opus 5.5 · Adobe After Effects