Oda

Screenshots

Signature effect

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

Changelog

1. v1.3.12026-10-30
   • Framer edition: every field of Projects, People, Materials and Awards now has a description under its name in the item editor: what the field is for, the sheet numbering, the photo sizes and the span rule for the materials grid. Framer's agent reads them too, so it fills a new item the intended way.
2. v1.3.02026-10-14
   • Project sheets show photos (HTML and React editions). The six line drawings are gone: each sheet on the Work track and on its project page now shows a photo printed on the drawing sheet, so the template can carry your own work. Around the photo, generated drafting marks (a frame ruled past its corners, crop marks, registration targets, centre ticks, pencil construction lines and the print's size) are drawn in, and a small WebGL shader develops the print like a darkroom tray, then hands over to the original photo. The photo always sits above the grid. Without JavaScript or WebGL, or opened from disk, the photo is simply there. Reduced motion shows the finished print.
   • New effect: assets/js/effects/photo-print.js (develop time, delay, mark timing and margins in its CONFIG). It replaces project-sheets.js, which is removed along with the data-drawing markup. drawing.js stays (the hero cabin and the process plan use it).
   • Project pages: a case study. Below the sheet: a short write-up, the facts as a title block and three more prints, each its own sheet (A-301.2, .3, .4). Hus Fjellveien has its three photos; on the other five the prints are in the markup, commented out until you add the photos.
   • Images: the project photos are in assets/img/work/ (about 300 KB each). The README's "Use your own images" and "Add a project sheet" explain how to swap them.
   • Tokens: --print-paper, the colour of the paper a photo develops on.
   • React edition: the same, as <PhotoPrint> (components/effects/photo-print.tsx, with its settings as props that default to the HTML CONFIG), <PrintSheet> for the case-study prints and --color-print-paper. Project in content/site.ts now has photo, caption and caseStudy in place of drawing and drawingTitle, and project-drawings.tsx is removed (lib/drawing.tsx stays). The <img> is rendered on the server; the canvas and marks are added after mount. Case studies for all six projects are in site.ts, with every photo in public/work/. TitleBlock takes a halves prop for a plain list of facts.
   Show all notes

   • Framer edition: the same, with the project sheets as a code component, Photo Print (PhotoPrint.tsx: Photo, Alt text, Seed, timing, margins and colours bound to the styles; static on the canvas and with reduced motion). The CMS Projects collection gains Photo, Photo Alt, a Case Study rich text, Case Facts and Interior / Detail / Context photos with alt, caption and sheet number. The Work sheets and the Project page use Photo Print, and the Project page has the case-study section (write-up, facts, three prints). New colour style Print Paper. The Project Drawing component, the Drawing option field and its mapping are removed; Drawing Title is now Caption. Differences: the write-up's heading has no dimmed last word (CMS rich text can't colour part of a heading). The skills (oda-content, oda-code-components, oda-design-system, rebrand, before-publish) and the /design-system page are updated.
3. v1.2.02026-10-14
   • New page: project detail (HTML and React editions). Every project gets its own sheet at full width, as in the Framer edition: sheet number and drawing title, the project's name, the drawing with its title block, and links to the previous and next sheets. HTML: work/<slug>.html. React: /work/<slug>/, made from work.projects in content/site.ts (each project now has a slug).
   • Work: each sheet on the track links to its page; the whole sheet is clickable.
   • React: the sheet is a shared component, components/ui/project-sheet.tsx, used on the track and on the project pages.
4. v1.1.02026-09-28
   • Framer edition (new): Oda as a remixable Framer project. Colour and text styles from DESIGN.md; native, editable sections, nav, footer and buttons; the drawings, the sun study and the sketch pad as code components whose colours follow the styles, and the pinned work track as a code override on native layers. Projects, people, materials and awards live in the CMS.
   • New page: project detail (Framer edition). Every project in the CMS gets its own sheet at /work/<slug>, with previous and next links.
   • Framer Skills: five skills for Framer's agent (design system, rebrand, content, code components, before publish) and base instructions, so the site can be extended or rebranded by asking in plain words.
   • Framer edition differences: the sketch pad downloads the drawing as a PNG instead of attaching it to the form (a native Framer form can't take a canvas); form submissions go to Framer's form inbox. Below 700px, and with reduced motion, the work track is a row you swipe. The phone menu is native, so it doesn't trap focus or close on Escape.
5. 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.
6. 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

Oda on the blog

• Oct 5, 2026

  HTML vs React vs Framer: which website template edition should you buy?

  An honest buyer's guide to the HTML, React and Framer editions of a website template: what's in each download, who it's for, the trade-offs, and when a Bundle or All-Access makes sense.

  6 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
• 

  Aurel

  Brand

  • HTML
  • React

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