Pricing Card with 3D Tilt & Energy Ring Effect

Open In Editor Publish Your Code

<div class="card-container" id="cardContainer">
    <canvas id="energy-canvas"></canvas>
    <div class="card" data-tilt data-tilt-max="10" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare data-tilt-max-glare="0.2">
        <h2 class="card-title">Nova Tier Access</h2>
        <p class="card-price">
            <span class="currency">$</span>39<span class="text-3xl align-baseline">.99</span>
            <span class="period">/cycle</span>
        </p>
        <p class="card-description">
            Ignite your potential with the Nova Tier. Experience unparalleled access and cosmic-grade features.
        </p>
        <ul class="features-list">
            <li>
                <svg class="rotating-disc-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="8"/>
                </svg>
                Hyper-Dimensional Storage
            </li>
            <li>
                <svg class="rotating-disc-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="8"/>
                </svg>
                Quantum Entangled Support
            </li>
            <li>
                <svg class="rotating-disc-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="8"/>
                </svg>
                Nebula Streaming (4K)
            </li>
            <li>
                <svg class="rotating-disc-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="8"/>
                </svg>
                Celestial Analytics Suite
            </li>
            <li>
                <svg class="rotating-disc-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="8"/>
                </svg>
                Zero-G Feature Previews
            </li>
        </ul>
        <button class="cta-button">Ascend to Nova</button>
    </div>
</div>

.rotating-disc-svg {
        width: 20px;
        height: 20px;
        margin-right: 12px;
        animation: spin 3s linear infinite;
    }
    .rotating-disc-svg circle {
        stroke: #FDBA74;
        stroke-width: 2;
        stroke-dasharray: 10 5;
    }

@keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

.cta-button {
        background-color: rgba(255, 150, 80, 0.25);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #FFFFFF;
        font-weight: 600;
        font-size: 1rem;
        padding: 14px 0;
        width: 100%;
        border: 1px solid rgba(255, 190, 120, 0.3);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(255, 100, 0, 0.25);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transform: translateZ(20px);
    }
    .cta-button:hover {
        background-color: rgba(255, 160, 90, 0.40);
        border-color: rgba(255, 200, 140, 0.4);
        transform: translateY(-2px) scale(1.02) translateZ(20px);
        box-shadow: 0 7px 20px rgba(255, 100, 0, 0.35);
    }
    .cta-button:active {
        transform: translateY(-1px) scale(0.98) translateZ(20px);
        background-color: rgba(255, 140, 70, 0.45);
    }

#energy-canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        pointer-events: none;
    }
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
</style>

let scene, camera, renderer, fieryBandMesh;
    let uniforms;
    let material;

const cardContainer = document.getElementById('cardContainer');
    const canvas = document.getElementById('energy-canvas');

const bandVertexShader = `
        uniform float time;
        varying vec2 vUv;
        varying vec3 vPosition;
        
        float noise(vec2 p) {
            return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
        }
        
        void main() {
            vUv = uv;
            vPosition = position;
            
            vec3 newPosition = position;
            
            float distortionAmount = 0.02; 
            float distortion = noise(vec2(position.x * 0.05 + time * 0.1, position.y * 0.05 - time * 0.15)) * distortionAmount;
            
            vec2 normalizedPos = normalize(position.xy);
            newPosition.x += normalizedPos.x * distortion;
            newPosition.y += normalizedPos.y * distortion;
            
            gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
        }
    `;

const fieryBandFragmentShader = `
        uniform float time;
        uniform vec3 fireColorBase;
        uniform vec3 fireColorHot;
        uniform vec3 fireColorCool;
        varying vec2 vUv;
        varying vec3 vPosition;

float random(vec2 st) {
            return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
        }
        
        float noise(vec2 st) {
            vec2 i = floor(st);
            vec2 f = fract(st);
            
            float a = random(i);
            float b = random(i + vec2(1.0, 0.0));
            float c = random(i + vec2(0.0, 1.0));
            float d = random(i + vec2(1.0, 1.0));
            
            vec2 u = f * f * (3.0 - 2.0 * f);
            
            return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
        }
        
        float turbulence(vec2 st, float baseFreq, int octaves) {
            float value = 0.0;
            float amplitude = 1.0;
            float frequency = baseFreq;
            
            for (int i = 0; i < octaves; i++) {
                value += amplitude * abs(noise(st * frequency));
                st = st * 1.4 + vec2(3.2, 1.7); 
                frequency *= 2.0;
                amplitude *= 0.5;
            }
            
            return value;
        }

void main() {
            float slowTime = time * 0.4;
            float mediumTime = time * 0.8;
            float fastTime = time * 1.6;
            
            vec2 centeredUv = vUv - vec2(0.5);
            float angle = atan(centeredUv.y, centeredUv.x);
            float normalizedAngle = (angle / (2.0 * 3.14159)) + 0.5;
            float radius = length(centeredUv) * 2.0;
            
            
            float flowSpeed = 2.0;
            float flowFrequency = 3.0;
            float baseFlow = sin(normalizedAngle * flowFrequency * 6.28318 + mediumTime * flowSpeed);
            baseFlow = baseFlow * 0.5 + 0.5; 
            
            vec2 noiseCoord1 = vec2(
                normalizedAngle * 8.0 + mediumTime * 0.3,
                vUv.y * 4.0 - mediumTime * 0.4
            );
            float fireDetail1 = turbulence(noiseCoord1, 1.0, 4);
            
            vec2 noiseCoord2 = vec2(
                normalizedAngle * 6.0 - mediumTime * 0.5,
                vUv.y * 3.0 + mediumTime * 0.3
            );
            float fireDetail2 = turbulence(noiseCoord2, 1.5, 3);
            
            vec2 emberCoord = vec2(
                normalizedAngle * 10.0,
                mod(vUv.y * 3.0 - fastTime * 0.5, 3.0)
            );
            float embers = noise(emberCoord * 8.0);
            embers = pow(embers, 3.0) * smoothstep(0.4, 0.6, vUv.y);
            
            float widthModulation = 1.0 - pow(abs(vUv.y - 0.5) * 1.8, 2.0);
            widthModulation = clamp(widthModulation, 0.3, 1.0);
            
            float mainFlicker = 0.92 + 0.08 * sin(fastTime * 7.7);
            float microFlicker = 0.95 + 0.05 * sin(fastTime * 30.0) * sin(fastTime * 17.3);
            float combinedFlicker = mainFlicker * microFlicker;
            
            float fireDetail = fireDetail1 * 0.6 + fireDetail2 * 0.4;
            fireDetail = pow(fireDetail, 1.2); 
            
            float baseIntensity = 0.7 + 0.3 * baseFlow;
            float turbulentIntensity = baseIntensity * fireDetail * widthModulation * combinedFlicker;
            
            float fineDetail = noise(noiseCoord1 * 3.0 + fastTime * 0.1) * 0.2;
            turbulentIntensity += fineDetail * widthModulation;
            
            turbulentIntensity += embers * 0.2;
            
            float finalIntensity = smoothstep(0.1, 0.9, turbulentIntensity);
            
            vec3 deepRed = vec3(0.7, 0.05, 0.01);    
            vec3 midOrange = fireColorBase;          
            vec3 brightYellow = vec3(1.0, 0.9, 0.3);   
            vec3 hotWhite = vec3(1.0, 1.0, 0.95);    
            
            vec3 finalColor;
            
            if (finalIntensity < 0.3) {
                float t = finalIntensity / 0.3;
                finalColor = mix(deepRed, midOrange, t);
            } 
            else if (finalIntensity < 0.7) {
                float t = (finalIntensity - 0.3) / 0.4;
                finalColor = mix(midOrange, brightYellow, t);
            }
            else {
                float t = (finalIntensity - 0.7) / 0.3;
                finalColor = mix(brightYellow, hotWhite, t);
            }
            
            float blueHint = pow(finalIntensity, 5.0) * 0.1;
            finalColor = mix(finalColor, vec3(0.7, 0.8, 1.0), blueHint);
            
            float alpha = finalIntensity * 2.0; 
            alpha = clamp(alpha, 0.0, 1.0);
            
            gl_FragColor = vec4(finalColor, alpha);
        }
    `;

function initThree() {
        log("Initializing Three.js");
        
        scene = new THREE.Scene();
        log("Scene created");
        
        camera = new THREE.OrthographicCamera(-1000, 1000, 1000, -1000, 0.1, 2000);
        camera.position.z = 100; 
        log("Camera created");

try {
            renderer = new THREE.WebGLRenderer({ 
                canvas: canvas, 
                alpha: true, 
                antialias: true 
            });
            
            renderer.setSize(800, 800); 
            log("Renderer created and sized to 800x800");
            
            uniforms = {
                time: { value: 0.0 },
                fireColorBase: { value: new THREE.Color(0xff6600) }, 
                fireColorHot: { value: new THREE.Color(0xffffaa) },  
                fireColorCool: { value: new THREE.Color(0xcc2200) }  
            };
            
            material = new THREE.ShaderMaterial({
                vertexShader: bandVertexShader,
                fragmentShader: fieryBandFragmentShader,
                uniforms: uniforms,
                transparent: true,
                blending: THREE.AdditiveBlending, 
                depthWrite: false, 
                depthTest: false,  
                side: THREE.DoubleSide 
            });
            log("Material created with shader");
            
            const placeHolderGeometry = new THREE.PlaneGeometry(50, 50); 
            fieryBandMesh = new THREE.Mesh(placeHolderGeometry, material);
            scene.add(fieryBandMesh);
            log("Initial mesh created and added to scene");
            
            createRingGeometry(); 
            
            animate();
            log("Animation started");
        } catch (error) {
            warn("Error in Three.js initialization:", error);
            const ctx = canvas.getContext('2d');
            if (ctx) {
                ctx.fillStyle = 'red';
                ctx.font = '16px Arial';
                ctx.fillText('Error initializing 3D graphics.', 10, 50);
            }
        }
    }

function createRingGeometry() {
        log("Creating ring geometry...");
        
        try {
            const cardRect = cardContainer.getBoundingClientRect(); 
            const cardWidth = cardRect.width;
            const cardHeight = cardRect.height;

if (cardWidth === 0 || cardHeight === 0) {
                warn("Card dimensions are zero. Retrying geometry creation shortly or check layout.");
                return; 
            }
            log("Card dimensions (px):", cardWidth, cardHeight);
            
            const gap = 10;          
            const ringThickness = 20;   
            const cornerRadius = 24;    
            
            const outerWidth = cardWidth + 2 * (gap + ringThickness);
            const outerHeight = cardHeight + 2 * (gap + ringThickness);
            const outerRadius = cornerRadius + gap + ringThickness;
            
            const innerWidth = cardWidth + 2 * gap;
            const innerHeight = cardHeight + 2 * gap;
            const innerRadius = cornerRadius + gap;
            
            log("Ring dimensions:", {
                outerWidth, outerHeight, outerRadius,
                innerWidth, innerHeight, innerRadius
            });

const canvasPadding = 40; 
            const canvasWidth = outerWidth + canvasPadding;
            const canvasHeight = outerHeight + canvasPadding;
            
            if (renderer) { 
                renderer.setSize(canvasWidth, canvasHeight);
                log("Canvas sized to:", canvasWidth, canvasHeight);
            }

if (camera) { 
                camera.left = -canvasWidth / 2;
                camera.right = canvasWidth / 2;
                camera.top = canvasHeight / 2;
                camera.bottom = -canvasHeight / 2;
                camera.updateProjectionMatrix();
                log("Camera projection updated");
            }
            
            if (fieryBandMesh && fieryBandMesh.geometry) {
                fieryBandMesh.geometry.dispose();
            }
            
            const outerShape = new THREE.Shape();
            outerShape.moveTo(-outerWidth/2 + outerRadius, -outerHeight/2); 
            outerShape.lineTo(outerWidth/2 - outerRadius, -outerHeight/2);  
            outerShape.quadraticCurveTo(outerWidth/2, -outerHeight/2, outerWidth/2, -outerHeight/2 + outerRadius); 
            outerShape.lineTo(outerWidth/2, outerHeight/2 - outerRadius);   
            outerShape.quadraticCurveTo(outerWidth/2, outerHeight/2, outerWidth/2 - outerRadius, outerHeight/2); 
            outerShape.lineTo(-outerWidth/2 + outerRadius, outerHeight/2);  
            outerShape.quadraticCurveTo(-outerWidth/2, outerHeight/2, -outerWidth/2, outerHeight/2 - outerRadius); 
            outerShape.lineTo(-outerWidth/2, -outerHeight/2 + outerRadius); 
            outerShape.quadraticCurveTo(-outerWidth/2, -outerHeight/2, -outerWidth/2 + outerRadius, -outerHeight/2); 
            
            const innerShapePath = new THREE.Path(); 
            innerShapePath.moveTo(-innerWidth/2 + innerRadius, -innerHeight/2);
            innerShapePath.lineTo(innerWidth/2 - innerRadius, -innerHeight/2);
            innerShapePath.quadraticCurveTo(innerWidth/2, -innerHeight/2, innerWidth/2, -innerHeight/2 + innerRadius);
            innerShapePath.lineTo(innerWidth/2, innerHeight/2 - innerRadius);
            innerShapePath.quadraticCurveTo(innerWidth/2, innerHeight/2, innerWidth/2 - innerRadius, innerHeight/2);
            innerShapePath.lineTo(-innerWidth/2 + innerRadius, innerHeight/2);
            innerShapePath.quadraticCurveTo(-innerWidth/2, innerHeight/2, -innerWidth/2, innerHeight/2 - innerRadius);
            innerShapePath.lineTo(-innerWidth/2, -innerHeight/2 + innerRadius);
            innerShapePath.quadraticCurveTo(-innerWidth/2, -innerHeight/2, -innerWidth/2 + innerRadius, -innerHeight/2);
            
            outerShape.holes.push(innerShapePath);
            log("Shapes with hole created");
            
            const ringGeometry = new THREE.ShapeGeometry(outerShape, 48); 
            log("Geometry created from shape");
            
            if (fieryBandMesh) { 
                fieryBandMesh.geometry = ringGeometry;
                fieryBandMesh.position.set(0, 0, 0); 
            }
            
            log("Ring geometry created successfully");

} catch (error) {
            warn("Error creating ring geometry:", error);
            if (fieryBandMesh) {
                const fallbackRadius = (cardContainer.offsetWidth || 360) / 2 + 15; 
                fieryBandMesh.geometry = new THREE.RingGeometry(fallbackRadius, fallbackRadius + ringThickness, 48);
                log("Created fallback circular ring geometry due to error.");
            }
        }
    }

let resizeTimeout;
    function onWindowResize() {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
            log("Window resize detected, recreating ring geometry.");
            createRingGeometry();
        }, 150); 
    }

function init() {
        log("Starting initialization");
        try {
            initThree();
            window.addEventListener('resize', onWindowResize);

if (typeof VanillaTilt !== 'undefined') {
                VanillaTilt.init(document.querySelector(".card"), {
                    max: 10,    
                    speed: 400,   
                    glare: true,   
                    "max-glare": 0.2 
                });
                log("VanillaTilt.js initialized on .card");
            } else {
                warn("VanillaTilt.js not loaded.");
            }

} catch (error) {
            warn("Critical error during initialization:", error);
            if (document.body) {
                 document.body.innerHTML = "<div style='color:red; text-align:center; padding: 20px;'>Error loading visual elements. Please try refreshing.</div>" + document.body.innerHTML;
            } else {
                document.addEventListener('DOMContentLoaded', () => {
                    if(document.body) {
                        document.body.innerHTML = "<div style='color:red; text-align:center; padding: 20px;'>Error loading visual elements. Please try refreshing.</div>" + document.body.innerHTML;
                    }
                });
            }
        }
    }

if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
        log("Document already complete, initializing now");
        init();
    } else {
        document.addEventListener('DOMContentLoaded', () => {
            log("DOMContentLoaded fired, initializing.");
            init();
        });
    }
</script>

Pricing Card with 3D Tilt & Energy Ring Effect

Recommended

3D Login Signup Box HTML CSS

Button with animated Dracula hover effect

Bubble Button Effect

HTML

CSS

JS

Recommended

3D Login Signup Box HTML CSS

Button with animated Dracula hover effect

Bubble Button Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS