GlassCard

glasscard-1779394025660.tsx

'use client'
import { useState } from 'react'

export default function GlassCard({ title = 'Neural Network', desc = 'AI-powered component generation at scale.', emoji = '🧠', stat = '17.5K' }) {
  const [hovered, setHovered] = useState(false)
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background:'rgba(255,255,255,0.08)', backdropFilter:'blur(20px)',
        borderRadius:'20px', padding:'28px 24px',
        border:'1px solid rgba(255,255,255,' + (hovered ? '0.3' : '0.15') + ')',
        boxShadow:hovered ? '0 20px 60px rgba(109,40,217,0.3)' : '0 8px 30px rgba(0,0,0,0.2)',
        transform:hovered ? 'translateY(-6px)' : 'translateY(0)',
        transition:'all 0.3s ease',
        background:'linear-gradient(135deg, rgba(109,40,217,0.15), rgba(37,99,235,0.1))',
        maxWidth:'280px',
      }}
    >
      <div style={{ fontSize:'40px', marginBottom:'14px' }}>{emoji}</div>
      <h3 style={{ margin:'0 0 8px', fontSize:'18px', fontWeight:'700', color:'#fff' }}>{title}</h3>
      <p style={{ margin:'0 0 18px', fontSize:'13px', color:'rgba(255,255,255,0.6)', lineHeight:1.6 }}>{desc}</p>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <span style={{ fontSize:'28px', fontWeight:900, color:'#a78bfa' }}>{stat}</span>
        <button style={{
          background:'rgba(109,40,217,0.5)', border:'1px solid rgba(167,139,250,0.3)',
          color:'#a78bfa', borderRadius:'8px', padding:'8px 14px', cursor:'pointer', fontSize:'13px', fontWeight:600,
        }}>Explore →</button>
      </div>
    </div>
  )
}

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Glassmorphism card with blur, gradient border and hover effect

More from Cards

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProp

StatsCard

Cards

import React from 'react';
import { useEffect, useState } from 'react';

interface NoisyCardProps {
  children: React.ReactNode;
  className?: string;
}

const NoisyCard: React.FC<NoisyCardProps> = ({ children, className }) => {
  const [noise, setNo

NoisyCard

Cards

import React, { useState, useEffect } from 'react';

interface HolographicCardProps {
  children: React.ReactNode;
}

const HolographicCard: React.FC<HolographicCardProps> = ({ children }) => {
  const [mousePosition, setMousePosition] = useState({ x

HolographicCard

Cards

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeho

NotificationCard

Cards