# Prismatic Border Glow > A soft multicolour border that blooms inward and sends paired ripples around rounded edges on edge movement, click or tap. Three.js renders the glow; GSAP shapes the pulse and settle. Canonical: https://gsapvault.com/effects/prismatic-border-glow Live demo: https://gsapvault.com/demos/prismatic-border-glow/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | webgl-shader, pointer-effects | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 9 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 soft blue, violet, pink and peach glow hugs a rounded surface while its centre stays quiet. Click or tap and two waves travel around the border: the light swells inward, its colours separate gently, then the glow settles back to its original width. The demo opens on a pale neutral surface inspired by the soft border treatment of Apple Intelligence. A compact appearance control shows the same material on dark UI. Attach it to your own panel, hero or application surface; the corner icon controls are optional. Ambient colour drift can be switched off. The same real ripple works on touch screens and from the keyboard button. Reduced motion, disabled WebGL and missing JavaScript show a static CSS colour border with the content intact. ## Features - A soft inward glow with blue, violet, pink and peach colour transitions - Click or tap to launch paired waves around the rounded border - Ripple width, bloom and colour separation respond together and ease back to rest - Light and dark appearances on the same surface - Adjustable glow width, intensity, pulse duration and ambient drift - Keyboard-operable corner ripple icon and visible focus indicators - Designed static CSS border for reduced motion, no WebGL or no JavaScript - Responsive canvas sizing, visibility-aware rendering and complete cleanup ## Use Cases - AI assistant panels and focus surfaces - Product hero sections with a softly illuminated frame - Application panels that respond to an action with a ripple of light - Creative portfolio sections with a restrained colour accent ## 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 Three.js draws the responsive border in a fragment shader. GSAP controls the pulse envelope and its settle, and handles motion preferences and lifecycle cleanup. The shader handles spatial wave travel, soft inward glow and the subtle colour separation. The surface keeps ordinary HTML content above the decorative canvas. ## Documentation How this effect 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 **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ **2. Add the surface to your ``:** _Code snippet omitted: it ships with the download._ **3. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ Already using three.js in a bundled application? Use your existing compatible import, expose it as `window.THREE`, then load `script.js` after GSAP. Do not load a second three.js copy or the retired UMD build. The script handles both immediate and deferred execution. ### Using It With Your Own Design **Markup contract:** each `[data-prismatic-glow]` is one independent surface. Keep `.prismatic-glow` on it and include the decorative `.prismatic-glow__fallback`. Give the root a real height through your layout. Ordinary HTML sits above the border. An optional `[data-glow-trigger]` button provides keyboard activation. Any non-control area of the surface can also be clicked or tapped. Existing links, form inputs and unrelated buttons keep their own actions. **Demo-only styling:** delete the `.showcase-*`, `.glow-controls` and `.glow-control` rules and the corresponding demo content. Inter, the edge-to-edge layout and the corner icon controls are presentation choices. The multicolour border and its pale centre deliberately echo soft illuminated product UI; the demo also includes dark appearance. **Required CSS:** retain the root's relative positioning, isolation, clipped overflow and rounded corners; retain the absolute canvas/fallback placement, negative stacking layer and `pointer-events:none`. Keep `touch-action:pan-y` so the surface does not prevent normal page scrolling. The static fallback remains painted until the canvas has rendered, then `.is-live` hides it. No semantic content is hidden while dependencies load. The shader reads the root's top-left CSS radius as its uniform corner radius; use one pixel radius for all four corners. For dark surfaces use `data-glow-theme="dark"`. The shader's centre is neutral `#f4f4f4` in light mode and `#111111` in dark mode. Match your surrounding surface to these colours or change the two `background` values in the fragment shader together with `--surface` in the CSS. This version fills its entire root; it is not a transparent overlay over photography. ### Options Set options before initialization; the script reads them once per instance. | Attribute | Values | Default | Description | |---|---|---|---| | `data-prismatic-glow` | Present | Required | Initializes a glow surface | | `data-glow-width` | `1`–`120` | `28` | Resting inward glow width in CSS pixels | | `data-glow-strength` | `0`–`2` | `1` | Colour intensity; `0` leaves a plain centre colour | | `data-glow-ambient` | `0`–`4` | `1` | Slow colour drift multiplier; `0` disables it | | `data-glow-pointer` | `0`, `1` | `1` | Respond to mouse or pen movement near the border | | `data-glow-duration` | `0.3`–`5` | `1.5` | Full pulse duration in seconds; most energy settles within about 0.9 seconds | | `data-glow-pixel-ratio` | `0.5`–`2` | `2` fine / `1.5` coarse | Rendering resolution cap, also limited by device pixel ratio | | `data-glow-theme` | `light`, `dark` | `light` | Surface appearance | | `data-glow-trigger` | Present on a button | Optional | Triggers the same ripple with click, Enter or Space | | `data-glow-theme-toggle` | Present on a button | Optional | Toggles dark appearance; script updates `aria-pressed` | ### Accessibility The canvas and fallback are decorative and hidden from assistive technology. Keep your content in semantic HTML and provide a real `[data-glow-trigger]` button for keyboard use. Each icon activation chooses a new point around the border, at least a quarter turn from the previous one. Enter and Space use the same behaviour as a click. The demo provides visible focus outlines and labelled ripple and appearance icons in its top-right corner. With `prefers-reduced-motion: reduce`, the scene and its ticker are not created. The static CSS border and your HTML remain visible. The demo hides its unavailable animation controls. A live change to motion preference disposes or reconstructs the scene through GSAP matchMedia. No JavaScript and no WebGL use the same static treatment. The CSS fallback uses its own fixed colour width; numeric shader options affect the animated version only. The ripple is decorative feedback: never rely on it alone to communicate success or another essential state. Use your normal text or status announcement for that. ### Dependencies - **GSAP 3.15.0 core**: pulse envelope and easing, shared ticker, matchMedia and context cleanup. No plugins or Lenis. - **three.js r180**: renderer, full-screen plane and fragment shader. The shader owns spatial wave travel, colour separation and glow falloff. - **Inter**: loaded only by the demonstration; any UI font works. ### Browser Support The animated version requires WebGL 2, JavaScript modules/import maps, ResizeObserver and IntersectionObserver, available in current evergreen browsers. Browsers or devices without usable WebGL receive the CSS border. A lost GPU context temporarily restores that fallback and resumes rendering when the context returns. The static version requires CSS conic gradients and supports the same modern browser family. ### Performance One plane, one draw call, no textures, image requests or postprocessing buffers. Rendering stops while the surface is outside the viewport or the document is hidden. With ambient drift set to `0`, it also stops after a pulse settles. Pixel ratio is capped at 2 for fine pointers and 1.5 for touch. The first lever on slower devices is `data-glow-pixel-ratio="1"`; the soft glow tolerates a lower resolution well. Keep the number of simultaneous full-screen glow surfaces small because each instance has its own WebGL context. Prefer `data-glow-ambient="0"` for an interaction-only effect. ## 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 Prismatic Border Glow](https://gsapvault.com/effects/prismatic-border-glow) - [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](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): - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt