Brand
Skincare DTC template with a WebGL serum drop
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.
Tax included · Checkout by Polar
Digital product · All sales final · Refund policy
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
aurel-html-1.0.0
aurel-react-1.0.0
npm install
npm run dev
Pages
Fonts
Who it suits
Palette
--clay (the warm mid-tone accent) measures only --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 (--placeholder token, #7A6459 (5.5:1 on white).<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..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.<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..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.privacy.html page.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.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.data-form-status live region and an optional data-endpoint attribute for wiring up a real backend (see README).Math.random), so the render is identical on every load and matches a static screenshot exactly — unchanged from the concept, just confirmed while porting.HTML if you want a site that runs straight from the folder, with no build step. React if you already build in Next.js. The bundle gets you both, for less than buying them apart.
The license page spells out what a purchase covers, including client projects.
Read the licenseNo. It's a digital product, delivered as soon as you've paid, so all sales are final. If something doesn't work as described, email contact@no-code.supply.
Read the refund policyNo. A new version of a template you've bought is a free download from your Polar account — see the changelog below for what changed.
Mostly, yes. In the HTML edition you change the words and images in any text editor, save and refresh. The README and DESIGN files show where the colours and fonts live.
Drag the folder onto Netlify or Vercel, or upload it to any static host — no build step for the HTML edition, or a couple of commands for the React one.
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.
A quiet, topographic-survey take on an expedition operator's site: two procedurally-drawn contour maps that redraw themselves as you switch between four real routes, an interactive elevation profile you can scrub with a pointer or the arrow keys, a pinned hour-by-hour walkthrough of a day on the ice, and a bookable 2027 departures table.
A Nordic architecture studio site that reads like a drawing set: a timber cabin that draws itself with a live sun study, project sheets on a sideways track, and a floor plan that builds as you scroll.