Kinetic Type Hero

Install

The whole page lands in app/templates/kinetic-type-hero-page/. 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

   Navigation and Kinetic Hero

   A navbar over the oversized variable-font word MOTION, its tracking, slant and letter height reshaping live with cursor and scroll, running into an electric lime marquee.

   hero
2. 2

   Pinned Display Typography

   Pinned across three viewport heights so three giant words — design, in, motion — scale, retrack and blur into place in scroll order.

   misc
3. 3

   Manifesto

   The studio manifesto scrolling in word by word on off-white, followed by the magnetic display line TYPE THAT MOVES and a reversed orange-red marquee.

   content
4. 4

   What We Do

   Three display cards — motion identity, type animation and composition systems — each raising its own colour glow and expanding on hover.

   features
5. 5

   Metrics

   Four oversized numbers on electric lime: work delivered, brands worked with, awards won, and the endless range of letter-spacing.

   stats
6. 6

   Selected Work

   Four signature projects in an asymmetric grid of large colour blocks, the background Aa glyph shifting and tilting on hover.

   gallery
7. 7

   Commission Call to Action

   The giant line START A MOTION under a conic-gradient glow that follows the cursor, with an email contact button.

   cta
8. 8

   Footer

   Studio blurb, navigation and social columns, backed by an oversized low-opacity KINETIK wordmark and the copyright line.

   footer