Three directions. Each coded from a real design, not invented.
Every one of these takes its structure and type relationships from an actual design image that was opened and read, and gives it a different motion character. Content, palette and copy are DriveOn’s own; no asset, colour value or line of copy is lifted. Pick one and it gets built out in full.
Reference
Loire — Editorial Sport Tennis Training Program
dribbble.com/shots/27662607
What it borrows
- — Dotted guide lines drawn across the layout as a visible grid
- — Emphasis by COLOUR inside a sentence — no bold, no accent hue at all
- — Translucent card over a full-bleed photograph, lower-left
- — Nav split: logo left, standing statements centre, stacked list right
Motion
Quiet — 780ms, no overshoot. Nothing bounces.
Reads as
Restrained, expensive, editorial. Asks to be read.
Open A
Reference
CEE AI Index — Data Design & Landing Page
dribbble.com/shots/27424669
What it borrows
- — Pale blue-lavender ground with soft rounded white cards
- — Semicircular gauge dials, big figure, caption beneath
- — Pill tabs where the active pill is filled dark; tinted stat pills
- — Hexagonal radar chart; thin display type over a portrait panel
Motion
Crisp — 420ms, tight stagger. Figures count up, arcs sweep.
Reads as
Measured and clinical. The numbers are the product.
Open B
Reference
Sports Performance Agency Website UI
dribbble.com/shots/26889105
What it borrows
- — Everything inside rounded card containers, never full-bleed
- — Floating translucent widget cards overlaid on the hero
- — Orange pill CTA paired with a circular arrow button
- — Big coloured stat number; bar charts; giant outlined ghost type
Motion
Springy — 520ms with slight overshoot. The friendliest.
Reads as
Warm, social, app-like. Closest to a consumer product.
Open CAll hero imagery is original, generated for this build on the keyless gpt-image-2 route and verified from each per-image sidecar (model gpt-5.6-sol, quality high). No stock and no third-party imagery, which DESIGN.md bars outright.