Purple Sector

Screenshots

Signature effect

A request waterfall that pins to the screen and runs as you scroll, filling three stage timers, a speed readout and the stage cards, inside a motorsport timing-screen look

Changelog

1. v1.0.02026-10-07
   • HTML edition: a dependency-free one-page site that opens straight from disk, with a live timing tower and a scrolling-traces canvas in the hero, a pinned scroll-driven request waterfall, a simulated "test your site" screen with a leaderboard, a four-stage process that plays itself on a loop, six expandable case studies, voice-note testimonials, a team grid, prices on a navigable teletext page, a booking form that holds your audit slot, 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 all copy, the clients, case studies, stage times and teletext pages in content/site.ts and each effect's settings as props with the HTML edition's defaults.
   • 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/ (hero-feed, hero-tower, load-trace, live-test, process, teletext), each with a CONFIG block at the top.
   • Self-hosted fonts. Barlow Condensed, Barlow Semi Condensed, Share Tech Mono and VT323 ship in assets/fonts/ under the SIL Open Font License, with licences. The concept loaded them from Google Fonts; no request now goes there.
   • Every colour is a token. The concept's literal greys, navies, the silver of the Process section, the hero-feed backdrop and the eight teletext colours are now named tokens in tokens.css.
   Show all notes

   • Reduced motion uses the kit's class. The pinned Load trace is switched off by html.reduced-motion (set by kit.js) instead of the concept's own rm class. The behaviour is the same.
   • The failsafe class is fs. The head script adds fs and ready after 5 seconds if main.js never starts, as the concept did, and the flag is window.__purpleSector.
   • The contact form can post for real. It still runs in demo mode by default, but a data-endpoint on the form now posts to your form service and shows the confirmation only when the service accepts it; data-success and data-error hold the messages and a polite status line announces them.
   • The live-test leaderboard note is built with the DOM instead of innerHTML, and the gap cells keep their colour after a run (the concept turned them grey).
   • Real pages for the footer's legal links. Privacy, Terms and Cookies went to dead anchors in the concept; they now open privacy.html, a clearly marked placeholder page with #terms and #cookies sections. Added 404.html, a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD ProfessionalService), a favicon, a touch icon, a share image, a web manifest and robots.txt.
   • Settings. The concept had its tuning numbers in the middle of the code; the ones a buyer would turn (intro length, frame rate, stage times, thresholds, loop timings, the teletext search) are in CONFIG blocks.
   • React: PageFx restarts on client-side navigation (the intro Skip button, reveals and progress bar now work after "Back to the front page"); "Send another" returns focus to the name field; case studies open independently like the HTML edition; HeroFeed enabled={false} draws once; the teletext clock follows site.timeZone; the live-test and nav sentences moved into content/site.ts.
   • Both: loop: false plays the Process once; the HTML Process markup lights column 4 with aria-pressed; unlit voice-note words use --dim (5.2:1); the open menu makes the page behind it inert; the timing tower has a screen-reader ranking and its rows are aria-hidden; the HTML head script sets reduced-motion before first paint.
   • Team portraits. Each team card shows a portrait (AI-generated demo people, assets/img/team-*.webp, 800 × 641, 12–16 KB each) behind its big number, under a navy shade that keeps the number readable. Without a photo, a card falls back to the purple glow panel. Same in both editions; in React the path is photo on each team.members entry.
   • The Load trace is the heaviest layout choice. The pinned section is 340vh tall (.ob-run in main.css). It pins only on windows at least 1001 px wide and 700 px tall and shows the finished trace everywhere else, and under reduced motion.
   • The page idles when nothing moves. The hero canvas draws at 25 frames a second only while the hero is on screen; the trace only works while it is near the screen; decorative CSS loops pause off screen.
   • The live test is a simulation (a hash of the typed address); it fetches and sends nothing. Replace it with a real tool before presenting it as a measurement.
   • The demo studio (Purple Sector Ltd, Milton Keynes), its clients, case studies, people, quotes, prices, the dog, the address and the numbers (hello@purplesector.example, +44 1632 960 314) are all made up. Replace them before launch.
   • The voice notes play no audio: the "wave" is decoration and the quote lights up word by word.
   • The "Prices valid until 31 March 2027" line and the "Q4 2026 · 2 left" slot count are typed.

Questions

Related

• 

  Ashlar

  Real estate

  Ashlar is a website for a boutique real-estate office that sells a few exceptional houses by introduction. It has five material slabs that open into exterior photographs, a register with photo galleries, facts and drawn site plans, a draggable terrace view with bearing marks and a dial, a three-step method with a timeline, advisor cards with live local times, and an introduction form that writes a letter as you type.

  Libre Caslon Display / FigtreeFrom $29
• 

  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
• 

  Cistern

  Product

  Cistern is a launch site for a residential energy-storage product, with a drawn graphite slab and its seam of light, a draggable 24-hour instrument that reads roof, house, battery and grid, a self-sufficiency calculator that suggests a model, three model cards, a FAQ and a free-survey request form.

  Jost / Inter TightFrom $29