code-anything.com
Log inStart free
Animated

Rotor

Rotor is a full-screen, pinned, scroll-scrubbed product-reveal template for hardware, gadget and automotive drops. The hero clip fills a sticky 100vh studio stage while a tall wrapper drives the scrub: scrolling the page maps directly onto the video's currentTime, cranking the product through a full 360° turntable one frame at a time — never autoplaying. Side-text captions slide in from alternating edges across progress bands as the sequence plays, and a slim bottom progress bar, a live "∠ 214°" rotation-angle readout and a SCROLL cue make the interaction legible. After the cinematic sequence the page continues with a 3-up spec row, a Generate-video CTA and a footer. No photography — the stage, captions and controls are all CSS gradients and inline SVG, and prefers-reduced-motion falls back to the first frame.

A blacked-out product studio — one gadget on a lit turntable, teal rim-light and indigo bounce, where scrolling is the hand that spins it 360°.

rotor.code-anything.app
RotorTURNTABLE · 360° · SCROLL-SCRUBBED
∠ 0°LIVE ANGLE
SCROLL
SCROLL = PLAYBACK

The scrollbar is the turntable

There is no play button. Scroll position maps straight onto the clip’s current time, so the product rotates exactly as fast as you scroll — forward to spin ahead, back to reverse.

360°PER REVEAL
SPEC SHEET

Built for the reveal

AXIS
360°
Full turntable sweep

One scroll of the page spins the product through a complete revolution.

PINNED
100vh
Full-screen sticky stage

The hero pins to the viewport while the tall track scrubs the clip.

SOURCE
0
Stock photos, ever

Stage, captions and controls are pure CSS and inline SVG.

◉ STAGE READY

Generate the reveal.

Describe the shot and roll a 360° turntable clip for your launch, then let visitors scrub it frame by frame as they scroll through a full-screen, pinned reveal.

A matte-black gadget on a slow turntable, teal rim-light, indigo bounce…Generate video
Powered by Seedance 2.0 · phi-cloud

Design rules

The system, applied to any site

  • Stage the product on a near-black studio surface (around #0A0B0D): a single centered device frame lit by a radial top spotlight, a soft circular floor reflection and a subtle vignette — nothing else competes for the light.
  • Make scroll the turntable: the hero <video> never autoplays; instead map the hero wrapper's transit through the viewport (0→1) onto video.currentTime so scrolling spins the product a full 360° frame by frame, and honor prefers-reduced-motion by resting on the first frame.
  • Overlay a scrub HUD as the signature: a thin track with a teal fill bound to scroll progress, a "SCROLL TO ADVANCE" label, a monospace frame counter (e.g. 072 / 120) and a rotation-angle readout like "∠ 214°".
  • Type: one oversized Space Grotesk display headline (clamp roughly 3–7em) with a single teal→indigo gradient accent word, calm Inter body, and every spec, frame count and angle set in a system monospace.
  • Use teal (#3BE0C7) and indigo (#6E7BFF) only as accents — rim-lights, the scrub fill, focus rings and one gradient word — while large surfaces stay matte near-black (#141619 panels, #22262C hairline borders, 16px radius).
  • Never use stock photography or a real photo of the product — compose the device, turntable, reflections, spec dials and controls from CSS gradients, shapes and inline SVG so the whole page is self-contained.

Ships with

Nav with wordmark + turntable statusHero: display headline, scroll-scrubbed 360° turntable in a device frame + scrub HUD with angle readout"Scroll = playback" explainer strip3-up spec / feature row in monospaceNumbered how-it-works (load clip → scroll to spin → read the angle → generate)Generate-video CTA (Seedance 2.0 · phi-cloud) + footer

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Space Grotesk

Body

Inter

Radius

16px

Explore palettes

More from the library

AuroraMarketing
Warm ArtisanMarketing
Sharp FadeBooking
CockpitDashboard

Make it yours in minutes.

Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.