Gleam Box

// Code for gleam-box/basic

Installation

Usage

import { GleamBox } from "@/components/pluto-ui/gleam-box"

<GleamBox>
  <p>Your content here</p>
</GleamBox>

Props

Examples

Basic Usage

// Code for gleam-box/basic

Bento Grid Layout

Create beautiful grid layouts with the gleam effect:

// Code for gleam-box/bento-grid

Custom Content

Use the as prop to render semantic HTML elements:

// Code for gleam-box/custom

Features

• Scroll-triggered animations: Uses CSS animation-timeline: view() for smooth scroll-based animations
• Theme-aware: Fully supports light and dark themes using CSS variables
• Reduced motion support: Respects prefers-reduced-motion media query
• Browser compatibility: Graceful fallback for browsers without animation-timeline support
• Customizable: Use the as prop to render any HTML element
• Type-safe: Full TypeScript support

Browser Support

This component uses CSS animation-timeline: view() which is supported in:

• Chrome 115+
• Edge 115+
• Safari 17.4+

For browsers without support, the component will still render with all styling, but animations will be disabled.

Notes

• The shine effect is triggered as the component enters and exits the viewport
• The animation uses CSS @property for type-safe custom properties
• All colors are theme-aware and automatically adapt to light/dark mode
• The component is fully accessible and maintains semantic HTML structure

Credits

This component was inspired by the CSS view-timeline shine effect demonstrations.