Aurora Ribbons

NewFree

Open preview

Constellation

Soft light ribbons drifting through a fine dot field, with a gentle pointer parallax and five colour themes.

shader
webgl
background
ribbons
aurora
dots
hero

Preset

Open in new tab

Motion

Speed1.00

Parallax0.60

Ribbons

Ribbons4

Width1.00

Variation0

Glow0.80

Dispersion0.55

Dots

Dot density0.55

Dot visibility0.45

Colour

Colour A

Colour B

Colour C

Background

Grain0.40

<AuroraRibbons />

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/aurora-ribbons.json

Needs a React + Tailwind project set up with shadcn. Copies the effect into your project, along with lib/effect-runtime.ts, the small WebGL layer it runs on. No other dependencies.

Or from npm

pnpm add @kagadmodyaa/effects

import { AuroraRibbons } from '@kagadmodyaa/effects/aurora-ribbons'

One package with every free effect, one import path each. No Tailwind or shadcn needed, and no stylesheet to import: the few layout rules an effect needs come with it. The npm package and the command above ship the same source.

Usage

The effect fills its parent, so give the parent a height and put your content above it. Choose a theme with preset; any prop you pass as well overrides the preset.

import { AuroraRibbons } from '@/components/effects/aurora-ribbons/aurora-ribbons'

export function Hero() {
  return (
    <section className="relative h-[560px] overflow-hidden">
      <AuroraRibbons className="absolute inset-0" />
      <div className="relative z-10">{/* your content */}</div>
    </section>
  )
}

<AuroraRibbons preset="Ember" speed={1} />

Presets

Aurora
Ember
Lagoon
Orchid
Paper

Props

Name	Type	Default	Description
preset	'Aurora' \| 'Ember' \| 'Lagoon' \| 'Orchid' \| 'Paper'	none (the defaults below)	A named theme. Any prop you pass as well overrides the preset’s value.
speed	number	1	How fast the ribbons drift. 0 freezes them. Range 0 to 2.
parallax	number	0.6	How far the layers shift with the pointer. Range 0 to 1.
cycle	boolean	false	Slowly rotate the colours through the palette.
ribbons	number	4	How many ribbons. Range 2 to 6.
width	number	1	Ribbon width, as a multiple of the default. Range 0.5 to 2.
seed	number	0	Rearranges the ribbons without changing their number or colours. Range 0 to 9.
glow	number	0.8	Strength of the halo around the ribbons and of the overall light. Range 0 to 1.5.
dispersion	number	0.55	Prismatic colour fringe on the ribbon edges. Range 0 to 1.
dotDensity	number	0.55	How fine the dot field is. 0 is sparse, 1 is fine. Range 0 to 1.
dotVisibility	number	0.45	How visible the dots are where no light falls on them. Range 0 to 1.
colorA	string	'#3df5c8'	First palette colour. A hex colour.
colorB	string	'#6a6dff'	Second palette colour. A hex colour.
colorC	string	'#c466ff'	Third palette colour. A hex colour.
background	string	'#04060b'	Background colour. A light colour switches the ribbons to soft pastel glazes. A hex colour.
grain	number	0.4	Film grain. Range 0 to 1.
className	string	—	Extra class on the root element. The effect fills its parent: give the parent a height.
style	CSSProperties	—	Inline style on the root element.

Files

What the command adds to your project, and where.

components/effects/aurora-ribbons/aurora-ribbons.tsx
The component.
components/effects/aurora-ribbons/shaders.ts
The fragment shader, as a string. Edit it to change the picture.
lib/effect-runtime.ts
Shared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.

Behaviour

Draws on a WebGL canvas that is created in the browser only, so there is nothing to hydrate differently.
Pauses while it is off screen or the tab is hidden, and lowers its resolution automatically if frames run slow.
With prefers-reduced-motion it draws one still frame instead of animating.
Without WebGL you see a still gradient in the same colours.
It is decorative: hidden from assistive technology, and it never takes focus or captures clicks.

See all effects