Glow Border Card

A card marked featured by a single accent band that travels its border on a blurred conic ring.

Featured

The one that matters

A band of light travels the border to draw the eye to the highlighted plan or card, without tinting the surface.

A blurred conic ring sits behind the card so the glow leaks softly around the edge, while a crisp accent band traces the border on top for definition. The card itself stays an opaque, top-lit panel, so the glow reads as a highlight rather than a tint on the surface.

Installation

Complete the shared Setup first, then copy the component into components/ui/glow-border-card.tsx.

components/ui/glow-border-card.tsx

'use client';import * as React from 'react';import { cn } from '@/lib/cn';export type GlowBorderCardProps = {  accent?: string;  speed?: number;  intensity?: number;  children?: React.ReactNode;  className?: string;};export function GlowBorderCard({  accent = '#f0883e',  speed = 5,  intensity = 0.7,  children,  className,}: GlowBorderCardProps) {  return (    <div      style={        {          '--glow-color': accent,          '--glow-speed': `${speed}s`,        } as React.CSSProperties      }      className={cn('relative', className)}    >      <div        aria-hidden        className="glow-ring pointer-events-none absolute -inset-[2px] rounded-[15px] blur-[7px]"        style={{ opacity: intensity }}      />      <div        aria-hidden        className="glow-ring pointer-events-none absolute inset-0 rounded-[14px]"        style={{          padding: 1.5,          WebkitMask:            'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',          WebkitMaskComposite: 'xor',          maskComposite: 'exclude',        }}      />      <div        className={cn(          'bloom-edge relative overflow-hidden rounded-[14px]',          'bg-gradient-to-b from-white to-[#f4f4f5] text-neutral-900',          'dark:from-[#1d1d1d] dark:to-[#161716] dark:text-white',          'shadow-[0_1px_2px_0_rgba(0,0,0,0.05),0_6px_16px_-10px_rgba(0,0,0,0.15)]',          'dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05),0_1px_2px_0_rgba(0,0,0,0.4),0_8px_20px_-12px_rgba(0,0,0,0.5)]',        )}      >        {children ?? <GlowSample />}      </div>    </div>  );}function GlowSample() {  return (    <div className="w-[300px] max-w-full p-6">      <div className="flex items-center gap-2">        <span          className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium"          style={{            color: 'var(--glow-color)',            backgroundColor:              'color-mix(in srgb, var(--glow-color) 14%, transparent)',          }}        >          Featured        </span>      </div>      <h3 className="mt-3 text-[16px] font-semibold tracking-[-0.01em]">        The one that matters      </h3>      <p className="mt-1.5 text-[13px] leading-relaxed text-neutral-500 dark:text-[#929292]">        A band of light travels the border to draw the eye to the highlighted        plan or card, without tinting the surface.      </p>    </div>  );}

Add the glow ring to your global.css.

global.css

@property --glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes glow-spin {
  to {
    --glow-angle: 360deg;
  }
}
.glow-ring {
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    var(--glow-color, #f0883e) 55deg,
    transparent 140deg,
    transparent 360deg
  );
  animation: glow-spin var(--glow-speed, 5s) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .glow-ring {
    animation: none;
  }
}

Usage

Example.tsx

import { GlowBorderCard } from '@/components/ui/glow-border-card';

export default function Example() {
  return <GlowBorderCard />;
}

Examples

Tune the accent color, lap speed, and content per card.

Pro

$19/mo

Tune the color and lap speed per card with accent and speed.

Props

Prop	Type	Default	Description
`accent`	`string`	`"#f0883e"`	Glow color travelling the border.
`speed`	`number`	`5`	Seconds for one lap of the border.
`intensity`	`number`	`0.7`	Halo opacity, 0-1.
`children`	`React.ReactNode`	-	Custom content; falls back to a sample.
`className`	`string`	-	Forwarded to the outer wrapper.