WebberUI
繁體中文

Kinetic Type Hero

Oversized variable-font hero whose letters stretch and recompose with scroll and cursor.

ProImmersivekinetic8 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/kinetic-type-hero-page.en.json?t=<install token>"

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

Kinetic Type Hero is a React kinetic typography hero template: oversized letters lift and stretch toward the cursor, and further down there is pinned display type, a word-by-word manifesto, a statement whose letters react to the cursor, and marquees. It is built with Next.js App Router, Tailwind CSS and Motion.

When to use it

  • Website for a design or motion studio
  • Showcase pages for type, typography or brand identity work
  • Key-visual pages for festivals, exhibitions and other events
  • Personal portfolios where type is the main visual

What to change after installing

  1. The hero word is `HERO_WORD` in page.tsx (default `MOTION`); letter size is fixed, so check that a longer word still fits the screen width.
  2. Manifesto, marquee and pinned-type text live in `MANIFESTO_WORDS`, `MARQUEE_TOKENS` and `SECTION_WORDS`; the cursor statement is the `line` string in `MagneticStatement`.
  3. Services, numbers and featured work come from the `CAPS`, `METRICS` and `WORKS` arrays; work cards are color blocks you can replace with your images.
  4. Colors are the `INK`, `PAPER`, `ACID`, `FLARE`, `AZURE` and `MUTE` constants at the top of the file.
  5. The letter stretch uses `scaleY` and translation rather than a variable font, so it works with any typeface you switch to.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →