Horizon

$ pnpm dlx shadcn@latest add @remocn/shader-grain-gradient-horizon

Installs Grain Gradient as a dependency. This file only fixes its look: the preset object at the top holds every value, so edit it in place to make the preset your own.

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ShaderGrainGradientHorizon } from "@/components/remocn/shader-grain-gradient-horizon";
 
export const RemotionRoot = () => (
  <Composition
    id="ShaderGrainGradientHorizon"
    component={ShaderGrainGradientHorizon}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

ShaderGrainGradientHorizon takes the same props as ShaderGrainGradient. Props you pass override the preset, except speed, which scales the preset's own pace: speed={2} is twice as fast as the preset, whatever its base speed.

Credits

Shader by paper-design/shaders.