Parallel

Screenshots

Signature effect

A manifesto whose words ink in as you read, with footnotes that slide into the margin, and a pair of parallel hairlines that drift apart and back again as you scroll

Changelog

1. v1.0.02026-09-30
   • HTML edition: a dependency-free fund site that opens straight from disk, typeset like a quarterly journal, with a settings block for every effect (the scroll-inked manifesto and its margin footnotes, the two hairlines that never touch, the four hand-drawn figures, the live deck queue, the letterhead cards on the portfolio table, the ten-day process ruler).
   • React edition: the same page as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion), with copy, the portfolio, the essay and its notes, the figures' labels and demo data in content/site.ts, one CSS Module per section and each effect's settings as typed props.
   • 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/ (manifesto, hero-lines, diagrams, deck-queue, letterhead, process), each with a CONFIG block at the top.
   • Self-hosted fonts. Newsreader and Instrument Sans 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 (nav glass, hover washes, the footnote flash, the letterhead shadow, the muted paper text in the dark box) are color-mix() of --ink, --ox and --paper instead of raw rgba(). Only the paper-grain texture keeps its own colour stops.
   Show all notes

   • The focus outline is a token. --focus is --ox (9.1:1 on the paper) instead of a fixed colour, and the dark pitch box sets it to --paper, so the ring is visible on both surfaces.
   • Inactive founder tabs use --graphite instead of 50% opacity, so their names pass contrast (6.0:1 on the paper).
   • The masthead strip is an <aside> with a label, and the skip link, a footer Privacy link and a mailto: fallback were added.
   • The manifesto meter reads 100% under reduced motion, and the word count in the margin is worked out from the essay (329; the concept said 420).
   • The pitch form has its own handler. #pitch-form carries no data-form attribute, because kit.form would bind a second handler on top of it and submit twice. It works in demo mode and posts email, what and who to a data-endpoint when you add one.
   • Complete without JavaScript. Start states are hidden only under .js. Without script the essay is fully inked with its footnotes shown, the figures are drawn, every company is listed, every letter is open, every founder quote is shown, all five process steps are lit and the numbers show their final values. Controls that need script (the mobile menu button, the filter chips, the founders' tabs and arrows, the footnote buttons, the pitch form and the clocks) are hidden, and the pitch box shows an email address instead.
   • A failsafe for slow or blocked scripts. If main.js has not started after 2.6 seconds the head script adds loaded, settled and failsafe, which lifts the preloader, shows the headline and reveals every hidden block, heading and figure.
   • Reduced motion. The preloader is skipped, the essay is fully inked, the ticker stops, the numbers show their final values, the deck queue stays on its snapshot, the founders don't auto-advance and every process step is lit.
   • The letterhead cards are mouse-only. They need a fine pointer and motion allowed. On touch screens and under reduced motion the "hover a row for the letterhead" hint stays hidden, and it is kept out of the live count that announces filter results.
   • New pages and delivery details. Added 404.html ("Errata") and privacy.html (in the same masthead, nav and footer), a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD Organization), a favicon, a touch icon, a web manifest and robots.txt.
   • Accessibility pass. Count-up figures keep their final value for screen readers and print; the ticker pauses on focus and has a pause button; the pitch fields and footnote markers have a visible focus ring and a 24px target; footnote aria-expanded is only set where notes open inline; the founders' tab strip no longer clips its focus ring; redacted text is hidden from screen readers with a "[redacted]" stand-in; the portfolio table keeps its table roles on narrow screens; the pulse dots and the freight dot stop under reduced motion; letterhead cards are built as DOM nodes; data-success now sets the confirmation wording.
   • There is no canvas. Everything that moves is CSS, SVG or one shared requestAnimationFrame dispatcher in util.js that runs only after a scroll. The deck queue and the freight dot run only while on screen.
   • The fund, the partners, the companies, the figures, the founder quotes, the letters, the addresses, the email addresses and the legal names are all made up. Replace them before launch.
   • The "Redacted" companies are hidden visually only. The words are still in the page source and are read by screen readers. Don't put a real confidential name in the markup.
   • The pitch form takes no real submissions until you add a data-endpoint.
   • In the React edition the pitch form takes its endpoint from endpoints.pitch in content/site.ts or from NEXT_PUBLIC_PITCH_ENDPOINT (read at build time). A redacted company is drawn from the shared portfolio.redacted text, not from its row, but the row's own fields still ship in the page's JavaScript: never put a real confidential name in it.
   • In the React edition "What we back" renders exactly four theses in a fixed grid (components/sections/back.tsx, back.module.css); a fifth needs a new article and grid rule as well as a back.stories entry.

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