Layered Marquee Home

Install

The whole page lands in app/templates/layered-marquee-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

1. 1

   Nav Bar and Layered Marquee Hero

   Sticky nav bar over three marquee layers running at opposing speeds, interleaved with oversized type: hover to slow them, click to reverse them, arrow keys to flip every layer at once.

   hero
2. 2

   Foundry Stats Band

   Four counters that roll up on entry: glyphs drawn, weight files shipped, enterprise licensing partners, and expansions per year.

   stats
3. 3

   Three Type Families

   Gradient specimen cards for the serif, sans, and rounded families, each with its weight range and price, lifting on hover.

   product
4. 4

   Type Your Own Specimen

   A live input on a cream panel that feeds whatever you type straight into two marquees, one solid and one outlined.

   form
5. 5

   Why This Foundry

   Three cards on the technical and licensing advantages, followed by a marquee of client logos.

   features
6. 6

   Licence Tiers

   Three font licences — personal, commercial team, and enterprise brand — with the recommended tier outlined in the brand red.

   pricing
7. 7

   Foundry Call to Action

   A full-bleed brand-red closing statement in oversized type, pointing to a free trial weight or a typography consultation.

   cta
8. 8

   Studio Footer

   Studio address and opening hours, two link groups for the fonts and the studio, and the copyright line.

   footer