# Radial Headline Burst > A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle. Canonical: https://gsapvault.com/effects/radial-headline-burst Live demo: https://gsapvault.com/demos/radial-headline-burst/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger, SplitText | | Techniques | scrub, pinning, radial-burst, text-animation, chromatic-aberration, 3d-transforms | | Uses Lenis | Yes | ## Overview A radial headline effect that releases hidden characters from a shared centre point into a confident, perfectly placed statement as the visitor scrolls. Every character travels from the same centre point, while rotation, scale, opacity, blur and a restrained cyan/warm-red fringe resolve with it. The effect is built for the moment a hero needs to announce itself. ScrollTrigger pins the stage for a deliberate runway, then the characters overshoot their final positions by a fraction and settle into alignment before the page continues. ## Features - Centre-out character burst powered by SplitText, with every glyph calculated from its real rendered position - One scrubbed ScrollTrigger timeline that reverses cleanly when the visitor scrolls back - Layered response: radial travel, rotation, scale, opacity and blur resolve as one visual gesture - Optional cyan and warm-red chromatic fringe that is automatically omitted on coarse pointers - Controlled overshoot and staggered back-out settle for a physical finish instead of a linear snap - Pinned runway with separate desktop and mobile distances, all configurable through data attributes - Real reduced-motion and no-JavaScript fallbacks leave the headline readable and untransformed - Multiple independent headlines can share one page without the script knowing anything about the surrounding design ## Use Cases - Agency and studio hero sections that need a memorable first scroll - Product launches with a single statement that should assemble with ceremony - Editorial opening spreads where typography is the visual subject - Portfolio case studies that turn a project title into a scroll-led entrance - Campaign landing pages that want a compact, high-impact type transition ## Vibe-Code Ready Setup This effect 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 After document.fonts.ready, each [data-radial-burst-text] element is split into characters and measured against the optional [data-radial-burst-origin] point. GSAP positions every character at that shared origin, then a pinned ScrollTrigger scrubs a timeline that moves each one toward its measured resting position, with the stagger ordered from the centre of the string outward. The first leg also resolves rotation, scale, opacity, blur and the optional text-shadow fringe. A second, overlapping leg carries each character a few percent beyond rest with back.out before bringing it back to x: 0, y: 0 and scale: 1. The mobile branch keeps the same geometry with shorter travel and transform-only rendering; the reduced-motion branch creates no trigger and shows the original text immediately. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before the closing `` tag:** ```html ``` **3. Add the effect to your ``:** ```html

Make an entrance

``` The script waits for `document.fonts.ready`, measures each character against the origin, and creates a pinned, scrubbed ScrollTrigger runway. The headline starts hidden at the origin and resolves as the visitor scrolls down. ### Options | Attribute | Values | Default | Description | |---|---:|---:|---| | `data-radial-burst` | marker | required | Identifies a burst scene. | | `data-radial-burst-text` | marker | required | Text element to split into characters. | | `data-radial-burst-origin` | marker | wrapper centre | Element whose centre becomes the shared launch point. | | `data-radial-burst-progress` | marker | optional | Receives the scrub progress from `000` to `100`. | | `data-radial-burst-runway` | `260`–`1800` pixels | `820` | Desktop pinned scroll distance. | | `data-radial-burst-mobile-runway` | `220`–`1200` pixels | `500` | Pinned scroll distance on coarse-pointer devices. | | `data-radial-burst-stagger` | `0`–`0.12` seconds | `0.026` | Delay between characters in centre-out order. | | `data-radial-burst-intensity` | `0.2`–`1.6` | `1` | Scales the initial rotation and settle overshoot. | | `data-radial-burst-blur` | `0`–`12` pixels | `7` | Initial character blur; capped at `3px` on touch. | | `data-radial-burst-fringe` | `true`, `false` | `true` | Enables the warm/cyan initial text-shadow fringe on fine pointers. | Values outside the documented ranges are clamped. Set `data-radial-burst-fringe="false"` when the surrounding design does not need the colour split. ### Accessibility - **Reduced motion:** `gsap.matchMedia()` skips SplitText animation and ScrollTrigger pinning when `prefers-reduced-motion: reduce` matches. The headline stays visible, readable and untransformed. - **No JavaScript:** the supplied CSS only hides the headline under `.has-js`, which is added by the script path. Without JavaScript, the original text is visible. - **Keyboard and semantics:** the effect is scroll-driven and adds no custom interaction or keyboard trap. Keep the supplied text element as a real heading, and preserve its accessible name if your design uses nested decorative markup. - **Touch:** coarse pointers keep the radial burst with a shorter runway and transform-first rendering. The expensive fringe channel is removed on touch devices. - **Colour:** the cyan and warm fringe is decorative; the final headline uses the normal text colour and does not rely on the effect to be readable. ### Dependencies **Required:** - GSAP 3.12+ (the demo uses 3.15.0) - ScrollTrigger - SplitText **Optional:** - Lenis 1.x for smooth scrolling. The supplied demo wires Lenis to the GSAP ticker; native scrolling works without it. ## 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 is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Radial Headline Burst](https://gsapvault.com/effects/radial-headline-burst) - [The Vault (£99 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback. - [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt