Kain Xu

Vortex

Shaders 55

About

“Vortex —A mathematical art generator in polar coordinates.” Parameters: t - time r - radius (0 ~ 1) th - angle θ x, y - cartesian coordinates (-1 ~ 1) noise() - random noise function exp() - exponential function hypot() - hypotenuse function Features: • Click to change pattern • Edit expression directly • Sharable via URL • Press Space to toggle resolution Math functions available: sin, cos, tan, abs, sqrt, exp hypot, atan2, max, min, round ceil, floor, random inspired by @antfu & @aemkei

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

Code

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

Usage.tsx

'use client'

import { VortexPage } from "@/components/ui/vortex"

const DemoOne = () => {
  return (
    <div className="w-full h-screen bg-black">
       <VortexPage />
    </div>
  );
};

export { DemoOne };

More by Kain Xu

View all
  • SpiralAnimation

    SpiralAnimation

    2.3K
  • ParticleTextEffect

    ParticleTextEffect

    2.1K
  • Wave Background

    Wave Background

    1.4K
  • FlowButton

    FlowButton

    1.2K
  • Entropy

    Entropy

    1.1K
  • layered text

    layered text

    1K
  • LiquidRadio

    LiquidRadio

    847
  • BlurTextAnimation

    BlurTextAnimation

    478

More in Shaders

View all
  • Glass Fold

    Glass Fold

    212
  • Neural Noise

    Neural Noise

    718
  • Water Caustic

    Water Caustic

    44
  • Shader Background

    Shader Background

    2K
  • Wave

    Wave

    687
  • Stripe like gradient-shader

    Stripe like gradient-shader

    265
  • Black Hole

    Black Hole

    23
  • Shader Lines

    Shader Lines

    2.3K