Portal Field

Shaders 134

About

An animated ambient WebGL background with glowing organic arcs, rendered as a sandboxed iframe you can tune for speed, size, hue, saturation and brightness.

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

Code

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

Usage.tsx

import PortalFieldCollection from "@/components/ui/portal-field";

export default function PortalFieldDemo() {
  return (
    <div className="relative h-[600px] w-full overflow-hidden rounded-xl border border-border bg-black">
      <PortalFieldCollection
        speed={1}
        size={1}
        length={1}
        density={1}
        opacity={1}
        hue={0}
        saturation={1}
        brightness={1}
      />
    </div>
  );
}