NewRemocn StudioGet the app
emocn

Swirl

Concentric bands swirling around a center point

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

Usage

// 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}
  />
);

Presets

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

Credits

Shader by paper-design/shaders.

Storm

Warp preset. Deep violet and lavender storm of marbled fluid

Candy

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