Future UI

Sci-Fi Environment

◆ Backgrounds

Three.js sci-fi background with smoky ring and animated distortion effects.

three.jsenvironmentshadersci-fi

No preview available

Controls

Demo Hero Content
0.4
4
0.5
1.5
#e0e0e0

Backgrounds / React Component

About Sci-Fi Environment

Three.js sci-fi background with smoky ring and animated distortion effects.

Category Backgrounds
Framework React + TypeScript
Dependencies three, @react-three/fiber, @react-three/drei
Tags three.js, environment, shader, sci-fi

Install Sci-Fi Environment 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/sci-fi-environment.json?key=YOUR_LICENSE_KEY"

Usage example

import { SciFiEnvironment } from './SciFiEnvironment';

export default function Example() {
  return (
    <SciFiEnvironment
      smokeOpacity={0.4}
      smokeDensity={4.0}
      vignetteRadius={0.5}
      vignetteSoftness={1.5}
      colorBg="#e0e0e0"
    />
  );
}