Live preview · Free prompt / template preset

Beverage story scroll

Characterful product launch with 3D cans, bold color, pinned chapters and image trails.

3D cansScroll stageImage trailBold product CTA

Live Rukter rendererMove your pointer or scroll to explore

This original working sample uses local Rukter media. Presets with a hero renderer mount the actual Rukter renderer. Generated sites vary with your content.

Where it works

Use this pattern when

Beverage, supplements, snacks, cosmetics and playful packaged-goods launches.

Sample art direction

BUBBL / 01 · A brighter kind of fizz

Runtime

Real WebGL 3D

How to use it

1Copy the prompt below into Codex or Claude, then add your brand and media.
2For Rukter, open Use in Rukter and check that the preset ID reaches the generator.
3Review and edit the generated draft in Theme Designer, then publish when ready.

Use with AI

Turn this example into a prompt for Codex or Claude

The prompt includes layout, behavior, runtime, accessibility and editable structure. Replace the sample brand and media with your own.

Use in Rukter

Build an original responsive website experience for [your brand or product], using the Rukter "Beverage story scroll" pattern as direction.

Visual example: BUBBL / 01 — "A brighter kind of fizz"; compose a product-led hero with a strong object silhouette and a short feature story. Replace the example content with my own brand copy and supplied media.

Behavior: Characterful product launch with 3D cans, bold color, pinned chapters and image trails. Best for: Beverage, supplements, snacks, cosmetics and playful packaged-goods launches.

Implementation: Use a real WebGL renderer for the 3D layer (three-soda-cans), with a useful static fallback when WebGL or motion is unavailable. Keep the result editable as sections, text, media, colors, and timing. Suggested Rukter sections: hero3d, scrollStage, velocity, tiles, headline, magnetic. Motion settings: textReveal: chars; parallaxDepth: deep; hoverEffect: glow; entranceRhythm: tight; loopMotion: float.

Make the preview usable on touch and keyboard, give controls visible focus, reserve media space to avoid layout shift, and respect prefers-reduced-motion.

When using Rukter Generate my site, preserve this exact selection: Library item ids: preset-beverage-story-scroll.

Rukter preset ID

preset-beverage-story-scroll

Editable implementation

What this preset defines

Sections: hero3d · scrollStage · velocity · tiles · headline · magnetic
Hero renderer: three-soda-cans
Cinematic effect: hero-zoom-reveal
Motion: textReveal: chars · parallaxDepth: deep · hoverEffect: glow · entranceRhythm: tight · loopMotion: float