Future UI

Aurora Curtain

◆ Backgrounds

WebGL2 aurora borealis curtain with layered light bands and mouse-tilt interaction.

backgroundwebglshaderauroraborealiscurtainlightinteractivemouse

No preview available

WebGL2 Shader ~ Move cursor to tilt the aurora

Controls

View Demo
Demo Hero Content
#22d3ee
#a855f7
0.3
1
1

Backgrounds / React Component

About Aurora Curtain

WebGL2 aurora borealis curtain with layered light bands and mouse-tilt interaction.

Category Backgrounds
Framework React + TypeScript
Tags background, webgl, shader, aurora, borealis, curtain, light, interactive, mouse

Install Aurora Curtain in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/aurora-curtain.json?key=YOUR_LICENSE_KEY"

Usage example

import { AuroraCurtain } from './AuroraCurtain';

export default function Example() {
  return (
    <div style={{ width: '100%', height: 400, position: 'relative' }}>
      <AuroraCurtain accentColor="#22d3ee" secondaryColor="#a855f7" />
    </div>
  );
}