Light Ray Frame Card

Curved white strands with glowing pulses flowing around your content.

Follow the light.

Curved white strands with glowing pulses flowing around your content.

Curved white strands with glowing pulses flowing around your content. Uses Light Ray Background at a brighter intensity for the frame.

Installation

text

Add the light-ray-frame-card component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/light-ray-frame-card.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { LightRayFrameCard } from "@/components/hangry-ui/components/light-ray-frame-card";
import { CardHeader, CardTitle, CardDescription } from "@/components/hangry-ui/components/card";

<LightRayFrameCard frameWidth={16} speed={1}>
  <CardHeader>
    <CardTitle>Your next idea.</CardTitle>
    <CardDescription>A little light around your content.</CardDescription>
  </CardHeader>
</LightRayFrameCard>

Props

Prop	Type	Default	Description
`frameWidth`	`number`	`12`	Nonnegative frame thickness in CSS pixels.
`speed`	`number`	`0.1`	Nonnegative animation speed multiplier. Set 0 for a still shader frame.
`contentClassName`	`string`	—	Additional classes on the inner Card.
`children`	`ReactNode`	Example heading and description	Content inside the card; supports all Card composition parts.
Native div and Motion props	`HTMLMotionProps`	—	Attributes, styles, and events on the outer frame. The built-in reveal sequence controls entrance animation.

Dependencies

Motion
vgpu