Future UI

Flame Shader Card

▦ Cards

Card with dynamic WebGL flame shader background effect.

cardwebglshaderflame

No preview available

Controls

Try different images, the flame color changes to match.

Cards / React Component

About Flame Shader Card

Card with dynamic WebGL flame shader background effect.

Category Cards
Framework React + TypeScript
Tags card, webgl, shader, flame

Install Flame Shader Card 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/flame-shader-card.json?key=YOUR_LICENSE_KEY"

Usage example

import { FlameShaderCard } from './FlameShaderCard';

export default function Example() {
  return (
    <FlameShaderCard
      item={{
        title: "Inferno",
        subtitle: "Fire Shader",
        description: "A blazing card with real-time flame effects",
        fallbackColor: [1.0, 0.4, 0.1],
        cover: "/your-image.jpg",
      }}
    />
  );
}