REFERENCE
- Gallery page: https://magpui.com/en/i/rabbit-kaleidoscope-texture-study-e07bb2
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/rabbit-kaleidoscope-texture-study-e07bb2/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/rabbit-kaleidoscope-texture-study-e07bb2/clip.mp4
- Original post: https://x.com/blak3shao/status/2113324127658602888 by @blak3shao
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Create a square looping motion study built from concentric rabbit-like silhouettes and a central eye-shaped motif. Reuse the same radial composition across several dramatically different material treatments: blue ink on cream, coarse multicolor mosaic, black-and-white dither and blurred tie-dye color. This is one standalone animated artwork, not a website.
DESIGN SYSTEM: Use a 720 by 720 logical canvas, responsive at 1:1. Start with cream #F0EADC and deep ink blue #173998. The central eye occupies approximately 45% of the canvas width, with small pale silhouettes arranged on an elliptical orbit. Alternate treatments introduce magenta #C52C8B, yellow-green #B6BF36, cyan #49A9C5 and black #161616. Keep the grain visible and irregular; no text, cards or interface chrome inside the artwork.
MOTION: On playback, rotate repeated silhouettes around the center through a full turn over a proposed 8000 ms linear cycle, cubic-bezier(0,0,1,1). Animate concentric rings toward or away from the center and rotate the shared composition into a diamond layout. Cycle material presets approximately every 1600 ms, with 240 ms crossfades using cubic-bezier(0.4,0,0.2,1). Let mosaic and dither treatments alter the apparent resolution without changing the main skeleton. Use slow radial scaling from 0.85 to 1.15 over 3200 ms with cubic-bezier(0.45,0,0.55,1). These durations are reconstruction targets; preserve the visual continuity of the underlying shapes.
SECTIONS: Blue-and-cream eye with orbiting silhouettes; noisy multicolor concentric vortex; blue diamond-shaped kaleidoscope; coarse multicolor pixel mosaic; monochrome stippled field; soft radial tie-dye burst. Treat these as variations of one reusable scene rather than six unrelated videos.
IMPLEMENTATION: Use Three.js with a full-screen plane and fragment shader. Render reusable vector masks into a small offscreen texture, then apply radial transforms, quantization, stochastic halftone and palette mapping. Interpolate between two preset buffers. Cap device pixel ratio at 1.5 and pause when offscreen. Provide a keyboard-accessible play/pause control outside the canvas and a concise accessible description. With prefers-reduced-motion show a still blue-and-cream composition and allow explicit playback.
ADAPT TO THE PROJECT: Reuse existing project tokens, fonts and canvas wrappers. Map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use newly drawn placeholder silhouettes and an original eye motif.
SUCCESS CHECK:
- The central motif and repeated silhouettes remain related across all texture presets.
- Grain, mosaic and dither are generated procedurally rather than baked into a video.
- The loop has no abrupt blank frame and pauses accessibly without consuming offscreen rendering time.
