Machina Template

Machina Template

Machina Template

The Machina is a dark, sci-fi automotive template built around a bi-directional virtual scroll engine. Instead of a normal vertical page, the screen splits into two vertical tracks that slide in opposite directions as you scroll, so text moves one way while the paired visual moves the other. A fixed HUD frame holds the brand mark, a section counter, a live system clock, arrow controls and a progress readout, giving the whole layout the feel of an instrument panel rather than a web page.
Four blocks carry the content. The hero opens with hero specs and a millisecond clock, then a blueprint accordion lets visitors open subsystems while the opposite track retargets its image, marker and data chip to match. Block three pairs an interior study with a draggable 3D card carousel of drive modules, complete with flip faces, prev and next controls, numbered buttons and an autoplay toggle. Block four closes on a tab rail that swaps copy and chips on one side while the other side renders the selected figure at display scale.
Everything runs on plain HTML, CSS and vanilla JavaScript with no frameworks or libraries. The palette is hyper-carbon black with neon cyan telemetry and laser red micro accents, set in Space Grotesk and Inter. Breakpoints at 900px and 480px reflow the twin tracks for tablet and phone, ARIA labels and reduced-motion support are built in, and five images plus a single CSS and JS file keep the package easy to edit.
2026-09-18 10:29:24 8 0