Make the product’s visual range appear inside the headline itself. Texture-Swatch fills a display word with six material surfaces in quick succession, then stops on two contrasting named materials. Warm collage cards and a restrained selection-box treatment keep the focus on what the surfaces look like rather than explaining them in a long catalogue.
What you get
A production blueprint for a fourteen-to-twenty-second, 1920×1080, 30 fps H.264/AAC MP4: collage and flickering word, short word-by-word copy, two named material holds, a glass panel and closing command/lockup.
Procedural recipes for concrete, terrazzo, brick, weave, corrugated metal and grass using CSS gradients and seeded SVG noise rather than supplied texture photographs. A real product’s own approved material images can replace the recipes when appropriate.
A two-layer glyph-fill method combining palette tint and material, with one precomposed text layer per surface and frame-stamped visibility changes instead of decoding new backgrounds during the flicker.
Reference timing near three frames per material at 30 fps, scale rules for visible grain and a retarget checklist. The guide-only package directs creation of the editable HyperFrames project and MP4; it does not contain a ready-made film or material engine.
Before you choose
Choose this when showing a surface is the most direct proof of value. First test the real headline with one coarse and one fine material at the intended viewing size. If either reads as visual noise, fix the scale or choose another presentation before adding a faster animation.
Good fit
A product whose value is a material, texture, finish, palette, theme or other visible surface.
A collection with at least six actual materials to show and two sufficiently different ones to name and hold.
A launch where the feature can be demonstrated through the letters’ fill instead of described in adjacent marketing copy.
Not for
A logical or numeric capability whose value has nothing to do with surface appearance.
A range with fewer than six real materials. Repeating unsupported surfaces merely to create flicker misrepresents the product.
Unverified third-party texture imagery. The documented alternative is a procedural representation, clearly appropriate to the actual product, rather than shipping image files with unknown provenance.
How to use
You say/hyperframes-texture-swatch-launch Launch film for our new surface pack. Six materials, name concrete and terrazzo.
List six materials the product actually supplies, choose two contrasting ones to hold by name and write one headline word. Prepare short copy, the real closing command and the lockup, recording the origin and permitted use of any supplied material images.
Prepare HyperFrames CLI, Node.js 22 or newer and FFmpeg and the referenced motion guidance. Build the material set before scenes, choosing own imagery or procedural gradients/noise and keeping turbulence seeded for repeatable renders.
Create identical text layers for all surfaces and stamp their visibility on the timeline. Use the material plus a subtle common tint clipped to the glyphs; do not rely on changing an image URL during a three-frame display window.
Check the flicker at the planned rate and the grain at the final type size. The guide suggests around three frames per material, with four still acceptable; coarse surfaces need larger lettering than fine textures. Named materials must stop changing and display the surface their caption identifies.
Build the remaining scenes, verify the closing command and review rendered samples at normal playback size. Inspect frames on both sides of material changes, run documented lint/check steps and verify output dimensions, duration, frame rate and audio as applicable. Keep the material list, source notes and timing with the editable project.
Requirements and costs
You bring
Six materials for the flicker and two the film names and holds — all shipped by the product · One headline word, and short copy that survives being read word by word · A licence position for every material image · The closing command or invocation, which must actually work · The lockup
v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
FAQ
No. The guide provides CSS/seeded-noise recipes for six recognizable surfaces. Your own approved images are another route. Either way, the materials shown must correspond to the actual product; a procedural recipe is not permission to invent an extra offered finish.
The reference is about three frames per material at 30 fps, with four defensible and five starting to read like a catalogue. Inspect across actual change boundaries to verify the rate. Consecutive frames within a three-frame hold are expected to show the same material.
A caption names a particular surface. Continuing to swap the fill would contradict that caption, so the two named examples hold still with the corresponding material. Choosing a strongly contrasting pair communicates range without extending into a long catalogue.
Often not. The guide suggests coarse patterns at roughly two hundred pixels or larger and fine ones down to about ninety; below that they can become noise. Check the encoded result and use a plain color where the material’s grain no longer reads.
The archive contains production, material-craft, scene-plan and retarget documents. It describes how to author the material definitions and animation, but the actual project and rendered MP4 still need to be built.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.