Role: Design & Development Platform: Framer Deliverables: 4-page responsive website, layout template, 6 custom code components, design system Timeline: June 2026

Velora is a cinematic website template for electric vehicle brands, automotive startups, and premium mobility companies. The goal was to build something that felt editorial and high-end — closer to a luxury product launch than a generic car dealership site — while staying fast to customize and ready to publish on Framer.

The template ships as a full marketplace product: four responsive pages, a shared layout system, scroll-driven motion, and a complete Velora design system buyers can remix in minutes.

EV and automotive brands need sites that do more than list specs. They need to communicate performance, design philosophy, and sustainability through motion, typography, and pacing. Most existing templates lean toward inventory grids and light themes — fine for dealerships, but wrong for premium electric positioning.

The brief implied several constraints:

Cinematic without being heavy — scroll-scrubbed video and rich motion, but performance that holds up on mobile

Editorial dark aesthetic — large type, restrained palette, Scandinavian-minimal tone

Production-ready, not a mockup — real SEO, semantic structure, accessibility, and a contact flow

Remixable for buyers — shared styles, layout template, and components so purchasers can adapt it without rebuilding from scratch

The visual language draws from premium automotive editorial sites: black backgrounds, high-contrast white type, orange accent for emphasis, and generous negative space. Typography uses Inter for headlines and body, with Spline Sans Mono for labels and eyebrows — giving technical credibility without feeling cold.

A full token system (Black, White, Orange Accent, muted whites, gray scale) and 10 named text styles (Velora/Display through Velora/Caption) keep the template consistent and easy to retheme.

Home — Hero → scroll video → animated introduction → performance stats → feature gallery → interior showcase → color selector

About — Brand hero → scroll story → design / performance / sustainability pillars → journey timeline → showroom → CTA

Contact — Hero → split layout with contact details and appointment form

404 — Branded not-found page with no-index metadata

A single layout template handles navigation, overlay menu, site preloader, and footer across all pages — so chrome updates once and propagates everywhere.

Motion wasn’t decoration; it structured the story.

Scroll-scrubbed video — scroll position drives video playback for a cinematic product reveal

Scroll text reveals — word-by-word and color-shift effects on introduction and about sections

Appear on scroll — staggered entrance for stats, gallery cards, and section headings

Site preloader — short branded load state on first visit and internal navigation

The hardest balance was making motion feel premium without hijacking scroll. Early versions auto-advanced to the next section when the video ended — it felt abrupt. Removing that target-section jump let users scroll naturally into the next chapter.

Several interactions needed custom code beyond native Framer:

Mobile browsers block autoplay — playsInline, muted autoplay, poster fallback

Scroll-controlled video with sticky stage and gradient overlays

Load + navigation transitions without blocking canvas editing in the editor

ScrollText / ScrollColorText / ScrollImageOpacity

Scroll-linked typography and image effects

The preloader returns null in the static renderer so the layout template stays editable in Framer — a small detail that matters for template buyers.

Responsive — Desktop, tablet, and phone breakpoints on every page plus the layout template

SEO — Page titles, meta descriptions, and Open Graph images on all routes; custom 404 with noIndex

Accessibility — Semantic <nav>, <footer>, and <section> tags; logical heading hierarchy; descriptive image alt text

Design system — Consolidated from 20+ legacy styles into 10 text presets and 2 link presets under the Velora namespace

Forms — Contact appointment form with labeled inputs and custom submit button component

Performance — Video preload="metadata", preloader capped at 0.55s, scroll lengths tuned per breakpoint

4 production-ready pages with shared layout template

6 custom code components for scroll video, hero video, preloader, and scroll effects

5 canvas components (Button, Link, Car Colors, Feature Video, Submit Button)

Marketplace-ready with listing copy, feature tags, and launch materials

Fully remixable — buyers inherit the design system and can publish without CMS setup

Scroll motion needs an exit strategy. Auto-advancing to the next section after a video completes feels clever in a prototype and jarring in production. Letting scroll hand off naturally reads as more confident.

Template work is systems work. The most valuable deliverable wasn’t any single hero — it was the layout template, style consolidation, and component library that make remixing possible.

Mobile video is its own problem. A desktop-perfect hero breaks on iOS without playsInline, muted autoplay, and a poster fallback. Building HeroBackgroundVideo once saved debugging on every page that uses it.

Editor experience matters for templates. If the preloader blocks the canvas, buyers can’t customize. Designing for both published site and Framer editor context is part of shipping a real template.