AI CSS Animations

Iridescent Beetle

Macro of an original jewel beetle on a pale twig against warm apricot bokeh: it walks on planted feet as a softbox passes over, its pitted shell sliding from emerald through teal to violet, then it lifts its wing cases, unfolds amber hind wings and settles beside a field-guide card.

Written and rendered by AI CSS Animations Oct 19, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
three.js
Topics
3D
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Many beetles owe their metallic greens and blues to structural color rather than pigment: stacks of transparent layers in the cuticle, each thinner than a wavelength of light, reinforce some wavelengths and cancel others. Because the effect depends on the path light takes through those layers, the color shifts toward blue and violet as the light or the viewer moves to a more oblique angle. Jewel beetles, scarabs and leaf beetles are among the best known examples, and some scarabs reflect circularly polarized light. Natural history filmmakers and macro photographers move their lights to show the shift.

The prompt

Make a 10-second 3D macro film of an original jewel beetle: its structural-color shell shifts from green to violet as the light and the camera move, then it opens its wing cases.

<inputs>
If I don't give you something, use the default and don't ask.
- Series: Field Lens, episode 4, from Hollin Vale Films (fictional).
- Title: "Color without pigment"
- Line: "Its green is made by layers thinner than light."
- Specimen card: "Prismatella caelivaga (fictional) · 31 mm · color from layered cuticle"
- Labels: "Elytra: the wing cases" · "Pronotum" · "Antenna, 11 segments" · "Hind wing"
- Length: 10 seconds.
</inputs>

<direction>
- Look: natural-history macro: one beetle on a pale twig, sharp and glossy, against a soft, warm, out-of-focus background of apricot and saffron light. The shell is the only cool color in frame, so its green and violet sing against the warm ground.
- Palette: background #F0B26A easing to #E7895C with paler bokeh discs #F7D6A6 and a few rose #E9A39A; twig #CDB89A with grain #A88F6E and a darker leaf scar #7E6650; shell base under the film a pale neutral metal #A9B8AE, because the color is made by the film, not the base; sheen targets: emerald #2FD27E near normal incidence, then teal #1DB7B0, cobalt #3B6BFF and violet #8B4DFF toward grazing; legs and underside bronze-green #4E5A2A with copper glints #B9774A; eyes #2A2016; hind wings amber membrane #E7B866 at 55% with veins #6A3C1E; type #2A1B14, secondary #6B4A36, accent #B8452E.
- The beetle, an original design built from the real parts of a jewel beetle (1 unit = 1 mm, 31 long), smooth and beveled, never blobby:
  - head: a small rounded capsule set into the pronotum, two large kidney-shaped compound eyes (a hexagonal facet normal map, about 60 facets across) and short mandibles; two antennae of 11 segments each (a scape, a pedicel, then nine flattened, saw-toothed segments shrinking toward the tip), jointed so they can sweep;
  - pronotum: a wide trapezoidal shield 9 wide and 6 long, gently domed, its front edge notched around the head, its rim slightly raised, finely pitted (a generated normal map of 0.12-unit punctures);
  - scutellum: a small triangle at the base of the elytra;
  - elytra: two long wing cases, each half of a tapered, domed bullet shape built as a parametric surface 22 long, meeting along a straight sutural line, each with ten rows of fine punctures (striae) running to the tip and two faint raised ribs, the tips ending in a few small teeth; separate meshes, so they can open;
  - underside and legs: ventral plates; six legs, each a coxa, a flattened femur, a slender tibia with two fine spurs and a tarsus of five segments ending in two small claws, with tiny hair tufts (thin cones) on the tarsal pads;
  - hind wings, folded under the elytra until they open: each a membrane (a subdivided plane with a generated amber vein CanvasTexture: a thick leading-edge vein, radial veins, one cross vein) hinged at the base with one transverse fold at 60% of its length.
- The color is structure, not paint, and it works like thin film on bright metal: MeshPhysicalMaterial for the elytra, pronotum and head, color #A9B8AE, metalness 1, roughness 0.16, clearcoat 1, clearcoatRoughness 0.03, iridescence 1, iridescenceIOR 1.8, and a generated iridescenceThicknessMap (thinner in the punctures, a slow gradient thickening toward the elytral tips) over a thickness range tuned so near-normal views read emerald and grazing views turn through teal and cobalt to violet. A dark base would kill the interference and leave the shell black, so keep the base bright and let the film do the coloring. Legs and underside share the film at iridescence 0.6 over bronze #8C6A3E. At load, render a test swatch at 0°, 40° and 70° from normal and adjust the thickness range until it does that. Green dominates the 0–3 s frames; violet covers at least a third of the shell at 6 s.
- Light that moves, because the sheen is the story: build a small environment scene (a warm dim room #3A2A20, one large softbox #FFF6EA, a cool strip #DDE8FF and a warm bounce card #F2B26A) and re-bake it with PMREMGenerator.fromScene at the start of every seek with the softbox at its position for t (dispose the previous target), so the shell's reflections follow it: the softbox travels in an arc over the beetle from front left to back right across 1.6–6.0 s. A key DirectionalLight #FFF1E0 at 2.0 rides with the softbox and casts soft shadows (PCFSoftShadowMap, 2048) of the legs on the twig; a HemisphereLight #FFE8D0 / #6B4A36 at 0.8. ACESFilmic, exposure 1.1. The beetle is clearly lit and clearly colored from the first frame.
- Background: a large plane far behind, drawn by a ShaderMaterial: the warm gradient plus 28 big soft bokeh discs (60–260px, faint hexagonal edges, lifting brightness 10–30%) that shift with parallax as the camera moves. No depth-of-field pass: the beetle and the twig near it stay sharp, and the twig fades into the soft background beyond 40 units.
- The twig: a TubeGeometry along a gentle curve, radius 2.4, rising from lower left to the right, with fine bark grain, two small buds and a leaf scar (MeshStandardMaterial, roughness 0.7).
- Walking, closed-form from t: a tripod gait (left front, right middle and left hind alternating with the other three) at 1.6 steps per second for 2.4 s, the body advancing 9 units along the twig. Each foot is planted on the twig's surface through its stance and swings on a half-sine arc 1.5 units high; solve each femur and tibia by two-bone IK every seek; the body bobs 0.2 units and rolls ±2° with the gait; the antennae sweep ±12° on slow sines.
- Opening: the elytra lift 32° and spread 18° each about hinges at their bases over 0.5 s on cubic-bezier(0.3, 0, 0.2, 1); the hind wings swing out from under them and unfold at the transverse crease (the outer panel turning 170° to lie flat) over 0.6 s; they hold 0.5 s, trembling ±1.5° at 2 Hz; then they fold back, the elytra close and seat with a 0.3° settle.
- Camera: fov 26. It opens close on the elytra, the shell's curve and its rows of punctures filling the right two-thirds of the frame while the warm background stays clear at the upper left behind the title; it pulls back along the body as the beetle walks (by 3.8 s the beetle is about 900px long, centered at (1100, 580)), orbits 40° round its left side as the light passes, and holds a three-quarter view from above for the opening and the end.
- Labels (HTML, positioned each seek by projecting 3D anchors): Courier Prime 400, 22px, #2A1B14, each on a 1px #6B4A36 leader ending in a 5px dot on its part; at most three at once, never crossing the beetle's body.
- Type: kicker "FIELD LENS · EPISODE 4" in Courier Prime 700, 20px, tracked 0.14em, accent; title Literata 400 italic (opsz 72), 84px, #2A1B14, top-left at (120, 110); line Literata 400, 28px, secondary, beneath; the specimen card at bottom right (x 1340–1800, y 900–990), a #F6EAD8 card with a 1px #6B4A36 rule, its text in Courier Prime 400, 22px. Text rises 12px as it fades in over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: an animal built from real parts, color that lives in reflections and shifts with angle, a walk with planted feet, wings that unfold from under the cases. Cheap: a green-to-purple gradient texture on an egg shape, a rainbow shader, legs that slide.
Banned: hue-cycling or gradient textures on the shell, rainbow colors, any number of legs but six, antennae without 11 segments, feet sliding on the twig, depth-of-field blur on the beetle, bloom, lens flares, real species names, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.6s: close across the elytra: rows of punctures and an emerald sheen under the softbox; the kicker and title rise in.
- 1.6–3.8s: the camera pulls back along the body as the beetle walks along the twig, feet planting, antennae sweeping; the softbox begins its arc and teal creeps in at the edges of the shell.
- 3.8–6.0s: the beetle stops; the camera orbits 40° as the light passes over and the shell turns teal, cobalt and violet from its edges inward; "Elytra: the wing cases", "Pronotum" and "Antenna, 11 segments" attach at 4.2, 4.5 and 4.8 s. At 6.0 s the beetle is still in three-quarter view, its shell half green and half violet, three labels on, nothing mid-fade.
- 6.0–7.6s: the labels clear; the elytra lift and the amber hind wings unfold, "Hind wing" attaching at 6.8 s; they hold, fold back and the elytra close by 7.6 s.
- 7.6–8.6s: the line and the specimen card rise in; the light settles front left so the shell rests half green, half violet.
- 8.6–10.0s: hold; only the antennae drift ±2°.
For other lengths, change the walk and the orbit; keep the opening at 1.6 s and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Legs, gait, elytra and wing angles, the softbox path and the camera are closed-form functions of t; the environment is re-baked each seek from the small light scene. Generate every texture once at load (punctures, eye facets, wing veins, bark and the iridescence thickness map).
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check six legs with every foot planted on the twig through its stance, eleven segments on each antenna, the shell green with a teal edge early and at least a third violet at 6 s, the shell never black or flat (at least half of it carries saturated color in every frame), the wings unfolding from under the elytra without passing through them, labels pointing at their parts and staying off the body, and the beetle brightly lit from the first frame. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

More like this on the motion design inspiration board: 3D motion design inspiration