Future UI

Inferno Card

▦ Cards

Card with animated WebGL smoke tendrils and hover glow effect.

cardwebglsmokefireanimation

No preview available

WebGL Smoke ~ Hover to Interact

Controls

#1e1e2e
#1e1e2e
340
380

Cards / React Component

About Inferno Card

Card with animated WebGL smoke tendrils and hover glow effect.

Category Cards
Framework React + TypeScript
Tags card, webgl, smoke, fire, animation

Install Inferno 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/inferno-card.json?key=YOUR_LICENSE_KEY"

Usage example

import { InfernoCard } from './InfernoCard';
import { Check, Sparkles } from 'lucide-react';

const FEATURES = ["Priority support 24/7", "Custom integrations"];

export default function Example() {
  return (
    <InfernoCard width={350} accentColor="#1e1e2e" smokeColor="#1e1e2e">
      <div className="px-8 pt-8 pb-2">
        {/* Badge */}
        <div className="mb-5">
          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full
            text-[0.7rem] uppercase tracking-wide text-violet-400
            border border-violet-500/20
            bg-gradient-to-br from-violet-500/[0.18] to-violet-500/[0.05]">
            <Sparkles size={11} />
            Most Popular
          </span>
        </div>

        {/* Plan name */}
        <div className="inline-flex px-5 py-1 rounded-lg
          border border-violet-300/35 bg-[#1e1e2e] mb-1">
          <h2 className="text-lg font-medium uppercase m-0
            bg-gradient-to-r from-violet-300 via-white to-violet-400
            bg-clip-text text-transparent">
            Pro
          </h2>
        </div>

        <p className="text-white/[0.38] text-sm mt-1">
          Everything you need to scale
        </p>

        {/* Price */}
        <div className="flex items-baseline gap-1.5 mt-5 mb-6">
          <span className="text-white text-5xl tracking-tighter leading-none">
            $29
          </span>
          <span className="text-white/30 text-sm">/ month</span>
        </div>

        {/* CTA */}
        <button className="w-full py-3.5 rounded-xl text-white text-sm
          cursor-pointer border-none mb-7
          bg-gradient-to-br from-violet-600 to-violet-700
          shadow-[0_4px_24px_rgba(124,58,237,0.35),inset_0_1px_0_rgba(255,255,255,0.1)]
          hover:brightness-110 hover:scale-[1.015]
          active:scale-[0.98] transition-all duration-300">
          Get Started
        </button>

        {/* Divider */}
        <div className="w-full h-px mb-5
          bg-gradient-to-r from-transparent via-white/[0.07] to-transparent" />

        {/* Features */}
        <ul className="flex flex-col gap-3.5 list-none m-0 p-0 pb-8">
          {FEATURES.map((feature) => (
            <li key={feature} className="flex items-center gap-3">
              <div className="flex items-center justify-center
                w-[18px] h-[18px] rounded-full
                bg-violet-500/[0.13] shrink-0">
                <Check size={11} strokeWidth={2.5}
                  className="text-violet-400" />
              </div>
              <span className="text-white/[0.58] text-sm">
                {feature}
              </span>
            </li>
          ))}
        </ul>
      </div>
    </InfernoCard>
  );
}