Future UI

Blade Sphere

✦ Effects

Generative CSS sphere made of twisted blades with particle effects.

sphereanimationcssgenerative

No preview available

Controls

10
45
440
3
0.12

Effects / React Component

About Blade Sphere

Generative CSS sphere made of twisted blades with particle effects.

Category Effects
Framework React + TypeScript
Tags sphere, animation, css, generative

Install Blade Sphere in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/blade-sphere.json?key=YOUR_LICENSE_KEY"

Usage example

import BladeSphere from './BladeSphere';

export default function Example() {
  return (
    <BladeSphere
      bladeCount={32}
      gap={8}
      maxWidth={500}
      twistFactor={0.15}
      noiseOpacity={0.12}
      enableShake={true}
      enableParticles={true}
      gradientString="linear-gradient(135deg, #667eea, #764ba2)"
    />
  );
}