# Kinetic Type Hero > A playful studio hero where five oversized letter objects form a bold composition visitors can drag, nudge, shuffle and reset. Canonical: https://gsapvault.com/sections/kinetic-type-hero-section Live demo: https://gsapvault.com/demos/kinetic-type-hero-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | draggable-typography, pointer-capture, keyboard-manipulation, container-queries | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview 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. ## Features - 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 ## Use Cases - Motion and identity studios - Type foundries and lettering artists - Design festivals and exhibitions - Culture-led campaigns and launches ## Vibe-Code Ready Setup This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works 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. ## Documentation How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick start Load `assets/style.css`, GSAP 3.12+ and `assets/script.js`, then copy the single `
` from `index.html`. The `
`, 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. ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements. - [Get the Vault](https://gsapvault.com/pricing) - [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects) --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt