The remote MCP server is temporarily paused due to usage limits. Learn more

Flow Lines Background

Animated flowing gradient lines background driven by Perlin noise, powered by WebGPU and WGSL shaders.

Made by Axyl

Procedural flowing gradient lines shader with Perlin-noise motion.

Installation

npx shadcn@latest add @soralabs/flow-lines-background

File Structure

flow-lines-background.tsx

Usage

import { FlowLinesBackground } from "@/components/sora-ui/shaders/flow-lines-background";

export default function HeroSection() {
  return (
    <div className="relative min-h-screen w-full overflow-hidden">
      <FlowLinesBackground className="absolute inset-0" />
    </div>
  );
}

Props

Prop	Type	Default
`lightColor?`	`string`	`"#3f3f3f"`
`midColor?`	`string`	`"#262626"`
`darkColor?`	`string`	`"#09050c"`
`className?`	`string`	-
`ref?`	`Ref<HTMLCanvasElement>`	-

Silk Background

Fluid, organic procedural silk wave background powered by WebGPU and WGSL shaders.

Built by Axyl. A motion-first component registry for React.

Last updated: 11/14/2026

Flow Lines Background

Installation

File Structure

Usage

Props

On this page