code-anything.com
Log inStart free
Animated

Assembly

Assembly is a precise, engineering-drawing template for hardware, dev-tools and "how it works" pages, built around a pinned, full-screen cinematic scroll experience. A tall scroll track (≈340vh) holds a sticky 100vh stage whose hero <video> fills the frame and is scrubbed by scroll position — scroll progress maps straight onto the clip's currentTime, so scrolling forward seats each part and scrolling back lifts them out. Blueprint-annotation captions (a mono label, a display headline and a measurement/spec line with a thin leader) slide in from alternating sides within their own progress bands, over a full-frame crosshair, corner-tick frame and blueprint grid. A technical HUD pinned to the bottom reports ASSEMBLY %, a STEP index and a live progress track, with a SCROLL cue that fades once scrubbing begins. Below the pinned hero, normal flow resumes with a 3-up annotated spec row and a Generate-video CTA. Everything sits on a blueprint-navy canvas with blueprint-blue and amber accents and inline-SVG measurement leaders — no autoplay and no stock photography.

A cold, precise engineering drawing — blueprint navy and a faint grid, blueprint-blue linework and amber annotations, where scrolling is the assembly line that seats an exploded mechanism part by part.

assembly.code-anything.app
AssemblyREV 2.0 · SCROLL-DRIVEN ASSEMBLY · IMPERIAL/METRIC
◇ DWG-0420 · EXPLODED ASSEMBLY · SHEET 01 OF 06
SCROLL
SPECIFICATION · 3 CALLOUTS

Read it like a drawing

Ø 0.00
0.02mm
Tolerance per fit

Every mating face lands within a fifty-micron band.

N = 47
47
Parts in the exploded view

Each one indexed, annotated and callout-linked.

v2.0
Seedance
Render engine

Premium exploded-assembly clip, scrubbed by scroll.

◇ GENERATOR READY

Generate the assembly.

Describe the mechanism and render an exploded-assembly clip for your page, then let visitors scrub it together as they scroll through the pinned hero.

A precision gearbox exploding apart then seating, blueprint navy…Generate video
Powered by Seedance 2.0 · phi-cloud

Design rules

The system, applied to any site

  • Build on a blueprint-navy canvas (around #0B1020) and lay a faint blueprint grid over it with repeating-linear-gradient lines in low-opacity blueprint blue, so every surface reads like drafting paper.
  • Frame the hero as a technical viewport: a bordered panel with corner ticks/crosshairs, a scale/units caption and inline-SVG measurement leaders (Ø and tolerance callouts) pinning to parts of the exploded assembly.
  • Scrub the hero <video> by scroll position — map scroll progress (0→1) onto video.currentTime, never autoplay and never loop; scrolling seats the parts, scrolling back lifts them out.
  • Overlay a technical scrub HUD bound to scroll: a track fill plus a monospace readout like "ASSEMBLY 47%" and a step index "STEP 03 / 06" so the visitor always knows how far the mechanism has come together.
  • Set one oversized Space Grotesk display headline (clamp into the 3–7em range) in blueprint blue, drop to calm Inter body, and keep every measurement, callout and step index in a system monospace; use amber (#FFB020) only for annotations and blueprint blue (#4FA8FF) for structure.
  • Never use photography or real imagery beyond the local exploded-assembly clip — compose every other visual from CSS gradients, the blueprint grid, corner ticks and inline SVG annotation lines, and honor prefers-reduced-motion (no scroll-scrub, hold the first frame).

Ships with

Pinned full-screen hero: ~340vh scroll track wrapping a sticky 100vh stage, full-bleed scroll-scrubbed video with blueprint grid + crosshair corner-tick frame + overlaid wordmark/navSide-text overlays: 3–4 blueprint-annotation captions sliding in from alternating sides within progress bandsScrub HUD pinned to the bottom of the stage: ASSEMBLY %, STEP n / 06, progress track + SCROLL cue3-up spec row with blueprint measurement annotations (normal flow, below the hero)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

12px

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.