Vela

Screenshots

Signature effect

An SVG bike that builds itself in the hero, repaints in your frame colour across the whole page, and rides through a pinned dawn-to-night city as you scroll

Changelog

1. v1.0.02026-10-01
   • HTML edition: a dependency-free pre-order site that opens straight from disk, with a self-assembling SVG bike, a frame-colour and add-on configurator with a live bill (every colour, add-on, price and weight in one CONFIG block), a pinned dawn-to-night city ride, a range calculator, hotspot detail cards, a comparison table, press quotes and a refundable-deposit reservation form, and a settings block for every effect.
   • React edition: the same page as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion), with copy, the five frame colours, the three add-ons, every price, the range model and the ride's captions and clock in content/site.ts, the bike as one component in components/bike/ drawn four times, the HTML edition's stylesheet split into one global file per section in app/styles/ and each effect's settings in content/site.ts.
   • Pages: home, 404, privacy.
   • One codebase, not one file. The concept was a single HTML file. The page is now index.html plus tokens.css, main.css, fonts.css, kit.css, kit.js, util.js, main.js and one file per effect in assets/js/effects/ (bike, city, configurator, range, marquee), each with a CONFIG block at the top.
   • Self-hosted fonts. Unbounded (variable weight) and Red Hat Text ship in assets/fonts/ under the SIL Open Font License, with licences. The concept loaded them from Google Fonts; no request now goes there.
   • Brand tints follow the tokens. Translucent colours (hairlines, glass, glows, the "due today" wash) are color-mix() of --white, --acc, --graphite and --asphalt instead of raw rgba(). The night accent wash is 14%. Only neutral black shadows and the sun and street-lamp artwork keep their own colours.
   Show all notes

   • The configurator is data. The five frame colours and the three add-ons are entries in CONFIG.colours and CONFIG.addons in assets/js/effects/configurator.js; the swatches (in the hero and in the configurator), the add-on rows, the colour descriptions, the bill and the weight chip are built from them. Add-ons are drawn as g.addon.a-ID groups in each of the four bike drawings.
   • The manifesto stays lit once passed. The sentence under "Design" lights word by word as you scroll, and every word above the window is fully lit, so a fast scroll never leaves it half dim (the concept's only axe failure). It is fully lit without JavaScript and with reduced motion.
   • The nav focus ring is always white. The accent ring measured 2.3:1 on the nav's glass over the daytime city; white clears 5:1. Everywhere else the ring is the accent (--focus).
   • The hidden numbers match the script. The range calculator's default estimate in the markup is now what the script computes for Eco, 78 kg, rolling terrain (77 km, 6 workdays, €0.21 per 100 km, 58 charges a year), and the battery drawing says "CHARGE 81%", so there is no jump when the script starts.
   • One polite status line each. The configurator and the range calculator announce a single sentence once you stop changing things (#cfgStatus, #rangeStatus); the animated totals are aria-hidden with the real value in a hidden copy.
   • A visible skip link. "Skip to content" appears on focus.
   • Terms point to a placeholder. The footer's Terms link goes to the "Terms of reservation" section of privacy.html (#terms), clearly marked as placeholder text.
   • The reservation form has its own handler. #resForm carries no data-form attribute, because kit.form would bind a second handler on top of it. It runs in demo mode: it validates the email, shows a confirmation ticket and moves focus to its heading.
   • Complete without JavaScript. Start states are hidden only under .js. Without script the bike is assembled and still, the ride is a still night street with all four captions, the hotspot cards are all listed, the configurator is a price list, the range calculator shows its default estimate, the publication names wrap, every FAQ answer is open and the reservation card is an email line. Controls that need script (hotspot dots, swatches, add-on switches, sliders, the reservation form, the pause button) are hidden with data-jsonly until main.js starts.
   • A failsafe for slow or blocked scripts. If main.js has not started after 2.6 seconds the head script adds ready and failsafe, which lifts the preloader, reveals every hidden block, heading and the assembling bike, and un-pins the city ride.
   • Reduced motion. The preloader is skipped, the bike is finished with still wheels, the spec numbers show their final values, the manifesto is fully lit, the publication names wrap and sit still, and every CSS animation and transition is removed. The ride stays pinned and follows the scroll, with a readout speed of 0.
   • New pages and delivery details. Added 404.html and privacy.html (in the same nav and footer), a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD Product with its pre-order offer: the bike at its price, no add-ons), a favicon, a touch icon, a web manifest and robots.txt.
   • The page idles when nothing moves. The shared animation loop (util.js) stops when the page is still and wakes on scroll and resize; the city skips its work while off-screen.
   • The ride is the heaviest thing on the page. The pinned section is 460vh tall and redraws a skyline wider than the window in three layers. Set enabled: false in city.js for a still night scene on slow devices.
   • Prose prices are typed, not driven by CONFIG. CONFIG.basePrice, deposit and the add-on prices drive the bill, the comparison table's price cell and the reservation summary only. The "€100" in the buttons, headings, FAQ, meta tags and privacy page, the add-on prices in the no-JS list, the "€2,400–3,200" competitor range and the JSON-LD prices are typed. The README lists every place.
   • The JSON-LD Product is written by hand and does not update when you change CONFIG. Keep its prices in step.
   • The range figure and the specs are typed twice. The calculator's model lives in range.js, while "up to 90 km" (hero, specs, hotspots, comparison, city readout) and the typed default estimate in the markup are plain text.
   • The demo product (Vela One), its specs, the press quotes and publications, the five hotspot cards, the delivery countries, the partner workshops, the reservation wave and "VO-1-04…" numbers, the company (Vela Mobility ApS) and the addresses (hello@vela.bike, vela.example) are all made up. Replace them before launch.
   • The reservation form takes no real payment: it validates an email and shows a confirmation with a random reservation number. Connect your checkout before you take a deposit (see the README).
   • The footer's Company and Help columns are placeholders that point at sections of the page (the FAQ, the press section, the top). Point them at real pages, or remove them.
   • In the React edition every price is formatted from one currency and locale at the top of content/site.ts with Intl.NumberFormat, so the symbol follows the locale (€2,690, or 2.690 €) and the deposit in the buttons, the reserve heading, the FAQ's refund answer, the footer button, the page description and the Terms placeholder follows deposit. Only the competitor's "€2,400–3,200" and the prose about the refund are still typed. The range calculator's starting values, the no-JS price list and the ride's finished readout are computed from the same data as the live ones.
   • In the React edition the JSON-LD Product is built from the content (the price and currency, the weight, the colour names and site.jsonLd), so it follows the prices and the colours; only the sku, brand, manufacturer, offer name and the spec list in site.jsonLd are typed. The HTML edition's is still written by hand.
   • In the React edition the bike is one component (components/bike/) rendered in the hero, the hotspot stage, the street and the configurator, so a new part or add-on is drawn once (ADDON_ART in components/bike/addons.tsx for an add-on). The ride's caption times and progress labels are written from ride.clock, so they can't disagree with the dashboard.
   • In the React edition the units and spoken sentences (the "kg" and "km" next to the numbers, "at 12 km a day", the configurator's and the range calculator's status lines) are content (configurator.text, range.text, ride.dash.kmUnit), so a translation doesn't need a component edit. The reservation form has its own handler (no kit Form) and posts nothing; the hotspot card drawings are components/sections/hotspot-art.tsx.

Questions

Related

• 

  Aurel

  Brand

  A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.

  Bodoni Moda / JostFrom $29
• 

  Ferro Type

  Studio

  A loud, orange-and-black type foundry site built around one variable font: a hero word that bends its weight and width under your cursor, a live type tester that writes its own CSS, an axis-by-axis tour, a keyboard-driven glyph inspector and a licence configurator with a working cart.

  Roboto Flex / Roboto MonoFrom $29
• 

  Hearth

  Hospitality

  Hearth is a restaurant site cooked over open fire: an ember canvas and heat-haze hero, a nine-course menu drawn plate by plate, a night-long fire timeline and a seat-map booking flow with gift vouchers.

  Gloock / Work SansFrom $29