section-005
AI ready

Kinetic Type Hero

Included in the Vault Get the Vault
Open in new tab

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

Released

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.

Kinetic Type Hero - website section preview

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, from the latest scan. 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.

Kinetic Type Hero comes with the Vault.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

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.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

Included in the Vault Get the Vault