God Rays

Volumetric light rays radiating from an off-screen source

Installation

$ pnpm dlx shadcn@latest add @remocn/shader-god-rays

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ShaderGodRays } from "@/components/remocn/shader-god-rays";
 
const ShaderGodRaysScene = () => (
  <ShaderGodRays speed={1} intensity={0.8} density={0.3} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShaderGodRays"
    component={ShaderGodRaysScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Credits

Shader by paper-design/shaders.

Dithering

Ordered-dither shading over an animated gradient field

Smoke Ring

Soft smoke ring curling and dissipating in place