Loading…
Live page · scroll inside
Premiumrobotics · dark · landing page · gsap · lenis · html
Automaton
A collaborative-robotics site in near-black and signal green: an SVG two-link robotic arm whose tool tip follows the pointer through real inverse kinematics (with a spring on the joints and an idle figure-eight), live joint telemetry, a capability matrix that highlights row and column on hover, a fleet of four machines with tilt cards, a spec sheet with class-best bars and a demo form.
Placeholder photos by Asif Al and Enchanted Tools on Unsplash. Replace them with your own before launch.
What's inside
- 01Boot sequenceLines appear every 140 ms; READY flashes; the slab lifts.
- 02Fixed barTranslucent after 80 px; underlines draw.
- 03IK arm heroThe arm eases toward the target with a critically damped lerp; joints glow when near the reach limit; the telemetry numbers update every frame; the crosshair spins slowly; lines rise.
- 04Capability matrixCells fill in a diagonal wave on enter; row/column highlight follows the pointer; the active model column lifts.
- 05The fleetPhotos unroll with a stagger; hover tilts the card 2° toward the pointer.
- 06Specs and demoBars grow on enter with a stagger; the form fields lift.
- 07Minimal footerNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
