Tender

Screenshots

Signature effect

A 3D CSS card with a foil sheen you can drag and tilt, a live card maker that swaps finish and limits in real time, and a pinned how-it-works scroll sequence

Changelog

1. v1.1.12026-10-30
   • Framer edition: every field of Plans, FAQ and Logos now has a description under its name in the item editor: what the field is for, the 20 % rule between the monthly and yearly prices, the small print and the logo format. Framer's agent reads them too, so it fills a new item the intended way.
2. v1.1.02026-10-03
   • Framer edition (new): Tender as a remixable Framer project. Every section and page of the other editions, rebuilt with native Framer layers around code components: the 3D card and its hero stage, the hero toasts, the card maker, the six feature widgets, the manifesto, the how-it-works phone, the calculator, the pricing switch, the preloader and the page textures.
   • Styles and components (Framer edition): colour and text styles named by purpose (49 and 30), plus reusable components (Button, Section Head, Page Intro, Tile, Plan Card, FAQ Row, Card, Tag, Stat, Nav, Submit Button and others). A /design-system page shows every style and component.
   • CMS (Framer edition): the customer logos, the pricing plans and the FAQ are collections, so a fourth plan or a new question is a new item.
   • Card finishes as properties (Framer edition): six finish slots on the card, four bound to colour styles (forest, ink, mint, bone) and two free, so adding a finish needs no code.
   • Framer Skills: five skills for Framer's agent (/design-system, /rebrand, /content, /effects, /before-publish) and an always-on brief.
   • Framer edition differences: fonts load from Framer's font hosting, both forms send to Framer's form inbox with a fixed confirmation (not personalised with the visitor's email), the plan buttons scroll to the form without pre-selecting "Book a walkthrough", the how-it-works steps aren't clickable, and the calculator result doesn't stick while you scroll.
3. v1.0.12026-09-29
   • Both editions: the chips in the card maker (finish, who's holding it) and the calculator's hourly-rate chips now respond to a mouse click. Pressing one scaled its label above the hidden radio, so the click never landed and the choice didn't change.
4. v1.0.02026-09-29
   • HTML edition: a dependency-free landing page that opens straight from disk, with a settings block for every effect (the 3D tilt-and-foil hero card, the hero toasts, the live card maker, the six feature tiles, the pinned how-it-works sequence, the time-back calculator).
   • React edition: the same page as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion), with copy and demo data in content/site.ts, one CSS Module per section and each effect's settings as typed props.
   • Pages: home, 404, privacy.
   • Contrast. --stone (tertiary text) moved from the concept's #6F6A60 to #5C5850. The old value measured 4.4:1 on --cream-2 and failed WCAG AA; the new one is 5.8:1 there and 6.3:1 on --cream.
   • The page is complete without JavaScript. The FAQ answers and the four how-it-works steps are collapsed or dimmed only when the script is running (.js), so with JS off every answer and step is open and readable. The calculator, budget panel, feature tiles and manifesto hold their finished values in the markup.
   • Brand tints follow the tokens. Translucent brand colours are color-mix() of --forest, --cream, --mint, --ink and friends instead of raw rgba() values, so changing a token re-tints hairlines, glass and shadows. The card finishes, foil and receipt colours keep their own literal stops.
   Show all notes

   • Footer clocks. The Leeds and Rotterdam times use the shared kit's data-clock.
   • Forms. The CTA and newsletter forms follow the shared data-form / data-form-status markup and read an optional data-endpoint (see README), with their own submit handlers for the personalised messages.
   • Self-hosted fonts. Onest and Azeret Mono ship in assets/fonts/ under the SIL OFL, with licences. No request goes to Google Fonts.
   • New pages and delivery details. Added 404.html and privacy.html, a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD SoftwareApplication), a favicon and a web manifest.
   • The hero card and the maker's preview card share one markup block (.tcard) and four finishes (forest, ink, mint, bone). The README's "Change the card design" recipe shows how to restyle one or add another.
   • There is no canvas or WebGL. The hero card's animation loop stops when it is off-screen or the tab is hidden, and every effect shows a static finished state under reduced motion.

Questions

Tender on the blog

• Oct 22, 2026

  Remixing a template with an AI agent: from download to your own site in an hour

  A step-by-step walkthrough of turning a website template into your own site with an AI coding agent: brand, copy, a new section, checks and deploy, with prompts you can copy.

  20 min read

• 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