Aurel

Screenshots

Signature effect

WebGL serum drop: a raymarched blob of "serum" that falls onto a pool on load, bulges and refracts toward the cursor, and falls back to an idle drift — with a CSS fallback that shows by default

Changelog

1. v1.0.22026-09-30
   • Hero on phones and small tablets: the heading no longer slides into the paragraph below it as you scroll. Under 860px wide the hero stacks, and the heading's scroll parallax was still moving it down over the text. Parallax now only moves elements laid on top of their box, so the stacked heading stays put. Fixed in both editions.
2. v1.0.12026-09-26
   • Docs: a new "Move a section into another site" section in the README and AGENTS.md of both editions: how to put the hero into a site you already have, tested on a host page with its own, clashing styles.
   • React edition: the hero now starts its own entrance. Before, only the header started it, so without the header the hero stayed invisible.
3. v1.0.02026-09-25
   • HTML edition: a dependency-free landing page that opens straight from disk, with a settings block for every effect (the WebGL serum drop with a CSS fallback, the 28-day hydration maps, the ingredient inspector and its generated molecule diagrams, the shop bag).
   • Pages: home, 404, privacy.
   • Contrast. --clay (the warm mid-tone accent) measures only 2.6:1 against the paper background --milk, well short of WCAG AA — the concept used it as text colour in three places on light backgrounds: the ritual steps' roman numerals (i./ii./iii.), the 28-day stats' arrows, and the big quotation mark in the reviews section. All three now use --bronze instead (5.2:1 on --milk), which the concept already used for equivalent accents elsewhere. The newsletter field's placeholder text also moved from #8f7a6f (4.1:1 on white) to a new --placeholder token, #7A6459 (5.5:1 on white).
   • Accessible hero heading. The concept's <h1> carried an aria-label that duplicated (and quietly paraphrased) the visible, animated text. The label is gone; the h1 now holds a visually hidden .sr-only copy of the real sentence plus the animated per-letter markup marked aria-hidden="true" — the same pattern kit's own splitText uses, so screen readers get the actual heading once, and sighted visitors still see the letters fall into place.
   • The hero's CSS fallback no longer depends on JavaScript succeeding. In the concept, the soft gradient blob only ever appeared once a script explicitly added a .no-gl class after WebGL failed to initialise — so a visitor with JavaScript off, or on a device where WebGL silently produced no frame, saw an empty gap instead. The fallback is now the default, visible state; serum-drop.js hides it only once the WebGL canvas has actually drawn a confirmed frame.
   • Product bottles are real markup, not script-built. The concept cloned the dropper/tube/jar illustrations from <template> tags at runtime, so the hero, the three ritual steps and the four shop cards were empty boxes without JavaScript. They're now static HTML (still generated from one shared pattern, just written out rather than cloned), so the whole page — including every product illustration — is complete before any script runs.
   Show all notes

   • The page is complete without JavaScript. Hidden start states (chart lines, bars, dot grids, reveals) apply only when the script runs. The stat numbers, the 64-dot survey grids and the first molecule diagram are in the markup, and the 28-day map panels have CSS stand-ins behind their canvases. The concept showed "0%", empty charts and blank map panels without JS.
   • Scroll reveals now run on the shared kit. The concept's bespoke .rv class and hand-rolled IntersectionObserver are gone; headings, cards and stats use kit's data-reveal/data-reveal-delay/data-split, and the ritual manifesto's word-by-word dimming uses kit.scrollWords. Same look and timing, but it now inherits kit's reveal failsafe (anything already on-screen reveals after ~2.5s even if the observer never fires) and its accessible split-text handling for free.
   • Footer. The concept's Help column ended in a non-functional "Contact" link; swapped for a link to the new privacy.html page.
   • Brand tints follow the tokens. The concept wrote ~100 translucent brand colours as raw rgba() values. They are now color-mix() of the brand tokens, so changing --deep, --milk, --clay, --bronze or --blush re-tints hairlines, shadows, glass and overlays too.
   • New pages and delivery details. Added 404.html and privacy.html, a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD Product), self-hosted fonts (no request to Google Fonts), a favicon and a social share image.
   • Forms. The newsletter signup keeps the concept's exact two validation messages and its discount-code reveal panel, now backed by a data-form-status live region and an optional data-endpoint attribute for wiring up a real backend (see README).
   • The 28-day hydration maps use a seeded coordinate hash for their noise field (never Math.random), so the render is identical on every load and matches a static screenshot exactly — unchanged from the concept, just confirmed while porting.
   • The hero's WebGL shader is capped at 1.6x device-pixel-ratio (a little under kit's usual 2x cap) since it's an expensive per-pixel raymarch; both it and the hydration-map canvases pause off-screen and in background tabs, and show a settled still frame under reduced motion.

Questions

Aurel on the blog

• Oct 6, 2026

  I used to be a Figma expert. Here's how I design now.

  A personal take from a designer of fifteen years: what changed when I stopped building in Figma, how I went from copy-pasting ChatGPT answers to running everything through an agent, and why I'm no longer limited by what I can build myself.

  10 min read

Related

• 

  Ashlar

  Real estate

  • HTML
  • React
  • Framer

  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 an index of houses beside one house sheet (photo switch, facts, and buttons to the house page and the introduction form), a page per house (facts, photographs in a lightbox, a longer story and the advisor who shows it), 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 $19
• 

  Cistern

  Product

  • HTML
  • React

  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 $19
• 

  Datum

  Portfolio

  • HTML
  • React
  • Framer

  Datum is a portfolio for an independent designer who also builds. Work comes straight after the hero: five projects, each with a cover, a detail shot, one outcome in plain words and a strip of week cells that splits the project into design weeks and build weeks on a shared scale. Below them sit a table of smaller projects and three priced services (a sprint, design and build, a monthly partnership), each with its own week strip and a button that takes the visitor to the enquiry form with that service ticked. Inspect mode, a switch in the header, draws the page's 12-column grid, section spacing, type specs and a live measure under the pointer. There is a case study page for each project, an about section, an enquiry form, a 404 and a privacy page.

  Funnel Display / Funnel Sans / Spline Sans MonoFrom $19