Prompt Showroom · guide

How Plume was made

A product page where the product photography is a magic trick: the Bengal in all three films was never on set — the footage is AI-generated video. Everything else is drawn by the page's own code.

The films: a photoreal cat, no cat

The three clips were generated with an AI text-to-video model — any of the current generation works (Kling, Google's Veo, OpenAI's Sora), and a regular consumer subscription to one of those apps is all you need. The whole shoot cost about a dollar in credits. The trick that makes them feel like one shoot is the shared setting: every prompt specifies the same subject ("a photorealistic Bengal cat with a golden rosetted coat"), the same set ("dark charcoal studio floor, dark seamless background"), and the same camera language ("soft dramatic studio lighting, cinematic shallow depth of field"). Change only the action between prompts and the model behaves like a director doing three takes. For the hero we went one step further: it was generated in image-to-video mode, seeded with a frame exported from the pounce film — so the cat batting the feather on its back is pixel-for-pixel the same cat, and the same feather, you meet again one scroll later.

The generation prompts for all three films ship in the site's recreation prompt, ready to reuse or restyle.

Blending video into the page

• Match the backdrop, not the frame. The page's background is near-black warm (#0d0c0e) because the films' studio backdrop is near-black warm. The hero video needs only a bottom scrim gradient for the headline; no borders, no letterboxing.
• Posters first. Each <video> has a JPEG poster and preload="metadata", so the page paints instantly and the films stream in after.
• Play only in view. An IntersectionObserver plays a film when a quarter of it is visible and pauses it when it leaves — three loops never run at once.
• Respect reduced motion. With prefers-reduced-motion, autoplay is stripped and the posters stand as stills.

The wand: one spring, one curve

The product render is inline SVG. The plume is five overlapping feather paths fanned around a central rachis with hand-placed barb strokes. Its motion is a single underdamped spring chasing a target: your pointer if it's on the stage, otherwise a slow Lissajous drift so the wand idles like something alive. The cord is one quadratic Bézier from the brass ferrule to the plume, its control point sagged below the midpoint — cord physics for the price of one Q command. The plume rotates to point along the cord, which is what a tethered lure actually does.

Honest numbers

• Page weight: three films total ≈ 4 MB (the hero ships at full 1080p; the supporting films at 720p); posters ≈ 190 KB; everything else is text and SVG.
• Dependencies: none. No frameworks, no players, no trackers. Google Fonts is the only external request.
• The films are disclosed as AI-generated on the page itself — the fiction is the brand, never the footage's provenance.