Oda

Screenshots

Signature effect

Self-drawing axonometric cabin with a draggable, real-latitude sun study

Changelog

1. 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.
2. v1.0.02026-09-24
   • HTML edition: a single index.html with self-hosted fonts, design tokens in tokens.css, and each effect (cabin, sun study, project sheets, work track, floor plan, material textures, sketch pad) in its own file with a settings block. Works from disk, no build step.
   • React edition: Next.js 16 + React 19 + Tailwind 4 + Motion, ported 1:1 from the HTML edition. All copy lives in content/site.ts, and every effect takes the same settings as typed props.
   • Pages: home, 404, privacy.
   • Phones: the cabin's notes are back. Instead of hiding them, phones show numbered markers on the drawing and a matching key list beneath it. The notes' text now lives in the HTML (data-cabin-labels), so it's edited in one place and read by screen readers on every screen size.
   • Phones and tablets: legible drawings. Text in the project sheets and the floor plan is drawn 1.4× (tablets) to 2× (phones) larger, lines are heavier, and a few labels move or shorten so nothing collides or clips. All drawing text has a paper-coloured halo so it stays readable over lines.
   • Sun study for any city. Latitude, longitude, time zone and date are settings; declination, solar noon and summer time are calculated, and the labels, hour ruler and plan's sun path follow. Mornings before the slider's first hour now get their own note.
   Show all notes

   • Accent contrast. Timber text uses --timber-ink (#A3724B) for large words and --timber-deep (#8C5E38) for small text so they pass WCAG AA; the timber colour itself is unchanged elsewhere. The nav's frosted glass is slightly more opaque (82% instead of 74%) for the same reason.
   • Process phases are only dimmed while you're scrolling through that section, and never without JavaScript.
   • Materials: each sample's note sits beside its button instead of inside it, so screen readers announce a short name rather than the whole note. Escape closes a pinned note.
   • Touch screens always show what each person is working on (it was hover-only). Stacked footer links have 24px targets.
   • Contact form uses the shared form helper: demo mode by default, real submissions with data-endpoint, and the sketch is attached as sketch.png when the form service accepts files.
   • Without JavaScript, the project sheets become a sideways-scrolling row instead of being cut off, and the controls that need scripts (sun slider, sketch pad) are hidden.
   • The process plan's "Sun path" label moved inside the arc so the 14:00 mark no longer overprints it.
   • The phone menu's close icon now forms a proper ×, the page behind the open menu can't be tabbed into, and a Privacy link was added to the footer.
   • Project-sheet status dots now show on every sheet (a CSS specificity clash hid them), and scroll reveals no longer crop the descenders of large headings such as "Let’s draw something."

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
• 

  Meridian Expeditions

  Travel

  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.

  Cormorant Garamond / ManropeFrom $29