Warp

Domain-warped color field that folds and stretches like liquid

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ShaderWarp } from "@/components/remocn/shader-warp";
 
const ShaderWarpScene = () => (
  <ShaderWarp speed={1} distortion={0.2} swirl={0.4} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShaderWarp"
    component={ShaderWarpScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Ready-made looks, each a standalone registry item that pulls in shader-warp 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.

silk

Violet and pink liquid silk folding in slow waves.

shader-warp-silk

sunset

Marbled coral, peach and wine flowing like warm liquid.

shader-warp-sunset

ocean

Glossy aqua currents traced with dark ink edges.

shader-warp-ocean

marble

Cream and charcoal marble veins swirling together.

shader-warp-marble

acid

Loud lime and cyan fluid swirling over black.

shader-warp-acid

cream

Soft peach-to-coral cream gradient with a gentle drift.

shader-warp-cream

deep sea

Diagonal teal bands rippling through midnight blue.

shader-warp-deep-sea

rose gold

Satin rose-gold folds with a soft sheen.

shader-warp-rose-gold

storm

Deep violet and lavender storm of marbled fluid.

shader-warp-storm

tsx

import { ShaderWarpSilk } from "@/components/remocn/shader-warp-silk";
 
export const Background = () => <ShaderWarpSilk />;

Credits

Shader by paper-design/shaders.

Usage

Presets

Credits