Electronics · Light

Liftoff

A pocket-sized product filmed in the landscape: the device takes off with the scroll, an altimeter spins in the corner, the controller's screen rises and becomes the landscape itself with a HUD, and the spec numbers roll like an odometer.

Palette

--bg#F1EBE1
cream panels (numbers spec sheet, price, footer)
--bg-dark#0F1216
studio product sections (arms, exploded view)
--surface-dark#1B1F25
controller frame, nav pill
--text#141414
headlines on cream
--text-light#F7F4EE
wordmark and headlines on photo/dark
--text-2#6E6A64
descriptions and captions
--accent#1E6F6A
price digits, active toggle (water turquoise)
--accent-2#E0702F
orange detail of the propellers, HUD dot
--line#D9D1C4
dividers of the number rows and rulers

Typography

Display: heavy neo grotesque, 700–800, normal case, tracking -4%, giant wordmark clamp(120px, 20vw, 320px) with a superscript asterisk — suggestions: Inter Display / Schibsted Grotesk
Body: same family 500 for section titles (clamp(28px, 3vw, 46px), tracking -3%, 2 lines) and 400 for body 12–13px
Support/labels: mono 9–10px in UPPERCASE with 0.15em tracking for HUD, section numbering ("02 — NAME") and exploded-view captions — suggestions: Geist Mono / JetBrains Mono
Treatments: spec numbers in display 600 with a smaller unit beside them; price digits that roll vertically (odometer); 3-digit altimeter with leading zeros.

Sections

Nav — translucent dark pill centered at the top with 5 links.
Hero — full-screen sunset landscape; device resting on the sand; giant wordmark in the bottom-left corner; specs on 3 lines and a light pill button with a circular arrow to the right of the wordmark.
Pinned takeoff — frames: the device rises from the sand and moves away; 2-line title and caption at the bottom left swap per chapter; large altimeter in the right corner.
Controller screen — controller frame with the central screen rises over the landscape and expands until it becomes the whole image, with HUD corner brackets and mono readouts in the 4 corners; large titles over the aerial image.
Wave divider — wavy cream bottom edge cuts into the photo.
Specs in numbers — split: photo of a hand holding the folded device on the left; cream panel on the right with a title and 3 rows of giant number + short description, dividers and a mono ruler at the base.
Arms unfolding — dark studio background, frames of the device unfolding; 2-line title at the bottom left; close-up with a rotating orange ring.
Exploded view — title on the left, 4 components in a row linked by a horizontal line, numbered mono caption under each.
Price — cream panel, large title, two-option toggle, price with rolling digits and installments; floating purchase bar.
Footer — landscape with a centered phrase and button; link columns; giant wordmark repeated at the bottom.

Motion and interaction

Takeoff: scroll scrub of canvas frames (pin ~300vh); mono altimeter counts 000→N with progress.
Rising controller: scroll → controller frame yPercent 100→0, then the inner screen scales until it covers the viewport (clip-path inset → 0) and the frame disappears.
HUD: corner brackets draw themselves (scale 0→1 from the corners), mono readouts blink every 1 s; recording dot.
Wave: SVG path at the bottom of the section, subtle morph with scroll.
Odometer: entrance → each digit is a 0–9 column that rolls to its value (translateY), 1.2 s, 80 ms stagger; price toggle rolls to the other value.
Arms opening: frames by scrub; orange ring rotates 0→360° in a slow loop.
Exploded view: scroll → components move apart along the x axis from the center (gap 0→72px) and the line grows.

Components

Pill nav: rgba(20,22,26,.72) background + blur 12px, 999px radius, 11px links.
Light pill button with a dark arrow circle on the right (32px).
Altimeter: 3 digits display 500 28px + mono label below.
Controller frame: 32px rounded rectangle, 1px rgba(255,255,255,.2) border, two hollow joystick circles.
Number row: display 600 value clamp(48px, 5vw, 80px) + 12px text on the right + 1px divider.
HUD corner bracket: 24px L shape, 1px white at 70%.
Toggle: pill with 2 options, active one filled dark.
Floating purchase bar: wide dark pill with name and a circular button.