GlassCard

glasscard-1779388705460.tsx

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

export default function GlassCard({ title = "Premium Feature", description = "Experience the next generation of UI components with stunning glass effects.", badge = "New" }) {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: hovered ? 'rgba(201,168,76,0.08)' : 'rgba(255,255,255,0.04)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        border: `1px solid ${hovered ? 'rgba(201,168,76,0.4)' : 'rgba(255,255,255,0.1)'}`,
        borderRadius: '16px',
        padding: '32px',
        maxWidth: '380px',
        cursor: 'pointer',
        transition: 'all 0.3s ease',
        transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hovered ? '0 20px 60px rgba(201,168,76,0.15)' : '0 4px 24px rgba(0,0,0,0.3)',
        position: 'relative',
        overflow: 'hidden',
        fontFamily: 'system-ui, sans-serif',
      }}
    >
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        height: '1px',
        background: 'linear-gradient(90deg, transparent, rgba(201,168,76,0.6), transparent)',
        opacity: hovered ? 1 : 0,
        transition: 'opacity 0.3s ease',
      }} />
      {badge && (
        <span style={{
          display: 'inline-block',
          background: 'rgba(201,168,76,0.15)',
          color: '#C9A84C',
          border: '1px solid rgba(201,168,76,0.3)',
          borderRadius: '20px',
          padding: '3px 12px',
          fontSize: '11px',
          fontWeight: 600,
          letterSpacing: '0.05em',
          textTransform: 'uppercase',
          marginBottom: '16px',
        }}>{badge}</span>
      )}
      <h3 style={{ color: '#F5F5F0', fontSize: '20px', fontWeight: 700, margin: '0 0 12px 0' }}>{title}</h3>
      <p style={{ color: 'rgba(245,245,240,0.6)', fontSize: '14px', lineHeight: 1.7, margin: 0 }}>{description}</p>
      <div style={{
        marginTop: '24px',
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        color: '#C9A84C',
        fontSize: '13px',
        fontWeight: 600,
      }}>
        <span>Learn more</span>
        <span style={{ transform: hovered ? 'translateX(4px)' : 'translateX(0)', transition: 'transform 0.3s ease' }}>→</span>
      </div>
    </div>
  );
}

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Glassmorphism card with blur effect and hover animation

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