section-005

Kinetic Type Hero

Included in the VaultGet the Vault

A playful studio hero where five oversized letter objects form a bold composition visitors can drag, nudge, shuffle and reset.

intermediate

4 more details

draggable-typographypointer-capturekeyboard-manipulationcontainer-queries

Kinetic Type Hero - website section preview

This section reads better at your own screen size than in the frame below:

Open the section in a new tab

About this section

A direct-manipulation typographic hero for studios, foundries and cultural organisations. Five oversized letter objects spell SHIFT in a deliberately unruly print composition; each can be dragged by mouse or touch, nudged with arrow keys, shuffled through authored arrangements or restored to the original still.

What's included

7 items

Five directly draggable letter objects
Equivalent arrow-key positioning with larger Shift-key steps
Two alternate authored compositions and reliable reset
Percentage-based positions that survive responsive layout changes
Root-scoped visual and motion controls
Independent mount and complete teardown API
Useful no-JavaScript and reduced-motion states

Perfect for

4 use cases

Motion and identity studios
Type foundries and lettering artists
Design festivals and exhibitions
Culture-led campaigns and launches

How it works

1 section

Every letter is a native button positioned with root-local percentage coordinates. Pointer capture keeps drags reliable, arrow keys provide equivalent fine control, and Shuffle moves between two authored arrangements. The controller scopes all listeners, tweens, generated IDs and state to one root and exposes a complete teardown.

Difficulty Intermediate

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this website section's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Included in the Vault

Get the Vault to use this section.

The Vault includes Kinetic Type Hero, the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Sections are available only in the Vault for now while the collection is small.

Get the Vault

Documentation

Quick start

Load assets/style.css, GSAP 3.12+ and assets/script.js, then copy the single <section data-kinetic-canvas> from index.html. The <main>, body background and inline body style are demo furniture.

Make it yours

Edit the studio name, headline, paragraph, details and CTA directly. Each .ktc-letter contains one visible character; its data-x, data-y and data-r values define the authored percentage position and rotation. Five characters fit the shipped canvas best. Update the canvas aria-label if the word changes.

Brand controls live on .ktc-hero: ground, ink, rule, lilac and red colours; display and body fonts; content width, gutter and editorial rail width. The demo uses Archivo Black and DM Sans from Google Fonts. Indigo on warm white, lilac and red exceeds 4.5:1; preserve sufficient contrast when rebranding.

Behaviour and API

Drag a letter with mouse, pen or touch. When a letter has keyboard focus, arrow keys move it 2.5%; hold Shift for an 8% step. Shuffle cycles between two authored compositions and Reset restores the opening still. data-duration controls the authored-layout transition.

For inserted content, call KineticTypeCanvas.mount(root). It returns { destroy() }; KineticTypeCanvas.destroyAll() removes every mounted instance. Teardown also ends an active drag, releases pointer capture, removes generated IDs and restores the original styles, classes and ARIA state.

Accessibility and integration

The studio statement is a real h1; use the heading level appropriate to the host. Letters, Shuffle and Reset are native buttons with visible focus. Status changes are announced through a polite output. Only the letter being dragged opts out of touch panning, so the surrounding page keeps normal vertical scroll. Reduced motion preserves direct manipulation and applies Shuffle/Reset instantly. Without JavaScript the authored composition, studio content and canvas jump link remain usable while inert tools stay hidden.

Dependencies and credits

GSAP core 3.12+ only; the demo is pinned to 3.15.0. No third-party imagery is included.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.