Swirl

Concentric bands swirling around a center point

Installation

$ pnpm dlx shadcn@latest add @remocn/shader-swirl

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ShaderSwirl } from "@/components/remocn/shader-swirl";
 
const ShaderSwirlScene = () => (
  <ShaderSwirl speed={1} bandCount={4} twist={0.1} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShaderSwirl"
    component={ShaderSwirlScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Ready-made looks, each a standalone registry item that pulls in shader-swirl as a dependency. Install one and drop it in like the base shader. Props you pass override the preset, and speed scales the preset's own pace instead of replacing it.

candy

Pastel pink, lilac and sky-blue spiral, soft and sweet.

shader-swirl-candy

sunburst

Retro cream and orange bands sweeping in from above.

shader-swirl-sunburst

hypno

High-contrast black and white hypnotic spiral.

shader-swirl-hypno

neon

Neon teal, purple and pink vortex around a dark core.

shader-swirl-neon

tide

Silky blue bands twisting into a deep navy whirlpool.

shader-swirl-tide

citrus

Juicy yellow, pink and green bands spiralling on cream.

shader-swirl-citrus

ember

Gold and orange fire bands spinning around a dark core.

shader-swirl-ember

lilac

Dreamy lilac and baby-blue swirl around a dark eye.

shader-swirl-lilac

retro

Seventies spiral in orange, sand and teal.

shader-swirl-retro

tsx

import { ShaderSwirlCandy } from "@/components/remocn/shader-swirl-candy";
 
export const Background = () => <ShaderSwirlCandy />;

Credits

Shader by paper-design/shaders.

Usage

Presets

Credits