Real Time Flow Field

Heroes 1

About

3d Flow field liquid simulation shader with post processing FX and an optional Hero overlay

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Real Time Flow Field to your project and fits it to your theme.

Code

How Real Time Flow Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import AuroraHeroSection from "@/components/ui/real-time-flow-field";

export default function DemoOne() {
  return (
    <AuroraHeroSection
      className="fixed h-screen w-full bg-black"

      // Heading + CTA
      title="Waters Edge"
      subtitle="Real‑time flow field • WebGL"
      primaryLabel="Get Started"
      primaryHref="#get-started"
      secondaryLabel="GitHub"
      secondaryHref="https://github.com/your/repo"

      // Camera/motion
      dpr={[1, 1.75]}
      speed={0.2}
      autoRotateSpeed={0.012}
      mouseInfluence={0.45}
      pointerSmoothing={0.18}
      cameraRadius={3.8}
      fov={1.6}

      // Flow + streaks
      scale={0.42}
      curlStrength={1.1}
      warpStrength={0.75}
      ribbonFreq={3.0}
      ribbonWidth={0.55}
      stripeFreq={28.0}
      stripeSharp={4.0}
      streakSteps={28}
      streakStep={0.042}
      streakAtten={0.85}

      // Sparkles + DOF
      sparkDensity={1.5}
      sparkSize={0.042}
      sparkSizeNear={0.36}
      sparkTwinkle={0.75}
      focusDist={8.0}
      aperture={0.6}
      nearBoost={1.45}

      // Colors
      baseColor={[0.035, 0.04, 0.07]}
      ribbonA={[0.38, 1.0, 0.86]}
      ribbonB={[0.60, 0.72, 1.0]}
      sparkleTint={[0.95, 1.0, 1.0]}

      // Post
      exposure={0.70}
      gamma={1.95}
      grainAmount={0.012}
      vignette={0.92}
    />
  )
}