Signal

Screenshots

Signature effect

Canvas infrastructure graph with a looping threat → containment sequence

Changelog

1. v1.1.12026-10-30
   • Framer edition: every field of Logos and Customer stories now has a description under its name in the item editor: what the field is for, the character limits of the quote and summary, the stat labels and the five-section body. Framer's agent reads them too, so it fills a new item the intended way.
2. v1.1.02026-10-02
   • Framer edition (new): Signal as a remixable Framer project. Every section and page of the other editions, rebuilt with native Framer layers around code components: the threat graph, product demo, incident replay, the six capability widgets, pricing calculator, count-ups, radar, boot screen and page texture.
   • Styles and components (Framer edition): colour and text styles named by purpose (53 and 40), plus reusable components (Button, Section Head, Page Intro, Card, Tag, Stat, Nav, Submit Button and others). A /design-system page shows every style and component.
   • New page: customer story (Framer edition). The customer logos and stories live in the CMS, and every company gets its own story page.
   • 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, the review form sends to Framer's form inbox, and the identities select defaults to its first option (50–250).
3. 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.
4. v1.0.02026-09-24
   • HTML edition: a dependency-free landing page that opens straight from disk, with a settings block for every effect (threat graph, boot screen, product demo, incident replay, login map, capability tiles, integrations orbit).
   • 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.
   • Phone hero callout: on screens up to 760px the threat callout now docks in a compact strip under the nav (the HUD fades while it shows) and the graph keeps that strip clear, so the callout never covers the graph. It drops the severity and timestamp there and says "Contained in 41s" in its label.
   • Incident replay on phones: lines now wait until you scroll them into view, finish instantly if you scroll past, and type about 3× faster while you're several lines ahead; phones type in 45% of the desktop time (was 55%). The timeline is now plain HTML, so it's complete without JavaScript and reads normally to screen readers.
   • Contrast: text that used #5C6167 / #4A4F55 (table and column heads, lane labels, the search box, placeholders, pending milestones, timestamps, footer headings, security.txt comments) now uses --muted #7C8288 to pass WCAG AA. The logo tile numbers are generated by CSS, so they renumber themselves.
   Show all notes

   • Callout placement breakpoint now matches the layout's 760px breakpoint (the concept used the phone placement on some tablet widths, far from the flaring node).
   • Fixed layout bugs: the Decide and Contain tabs pushed the product window wider than a phone screen; long verdict pills overlapped the event column; the "Open in Decide" toast button wrapped; the hidden toast button could receive keyboard focus.
   • Works without JavaScript: the log stream, login list, gauge, sparkline, confidence ring, metrics, milestones and pricing estimates show real content in the HTML; all three product panels show when scripts are off.
   • Accessibility: removed ARIA labels that aren't allowed on plain elements; typed and split text has a screen-reader copy; the approve card keeps keyboard focus after you answer; the menu button is labelled "Menu" and the phone menu closes on Escape and locks page scroll.
   • Touch: the graph's cursor effect ignores touch, so scrolling over the hero on a phone no longer drops a crosshair.
   • Integrations orbit: badges are spaced evenly by script, so you can add or remove them freely; the flowing spokes are drawn in CSS.
   • Footer links: Privacy and Cookies now point to the included privacy.html.
   • Graph labels never overlap a node: each label tries right, left, then just above or below its node, keeps its spot while it stays clear, and unnamed nodes move out of named labels’ way.
   • Fixed CSS collisions: the top-left corner mark was hidden by the incident timeline’s styles, and the footer status line on the 404 and privacy pages was tinted red by the form’s status style.

Questions

Signal 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

• Oct 4, 2026

  How to write an AGENTS.md your AI agent actually follows

  What to put in an AGENTS.md (or CLAUDE.md), what to leave out, and the mistakes that make your AI coding agent ignore it. With real examples from 15 website templates.

  11 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