Installation
Usage
import GlassBrowserHistory from "@/components/ruixen/glass-browser-history";
export default function App() {
return <GlassBrowserHistory />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties | - | Additional styles for the container |
Features
- Stacked browser windows — 3 visible cards with cascading depth, scale, and opacity transitions
- macOS window chrome — traffic light dots (colored when active, gray when behind), centered URL bar with lock icon
- Abstract wireframes — 5 unique page types (Dashboard, Repo, Issues, Design, Notes) rendered as minimal skeleton layouts
- Drag navigation — swipe left/right on the front card to cycle through history entries
- Tap to advance — click the front card or dot indicators to navigate
- Spring physics — smooth deceleration easing on all card transitions
- Dual theme — full light and dark mode support with CSS custom properties