Features

• Glassmorphism design — Beautiful frosted glass effect with blur
• Cursor tracking — Dynamic lighting that follows your mouse
• Proximity detection — Glow activates as cursor approaches the card
• Multiple glow modes — Card glow, border glow, or both
• React 19 ready — Built with modern patterns (ref-as-prop, optimized state)
• Security hardened — Input validation prevents CSS injection attacks
• Fully accessible — ARIA attributes and keyboard navigation support
• Zero runtime dependencies — Pure React, no external libraries

Live Demo

Explore the component in our interactive Storybook:

https://slash-ui.github.io/RayCard/

Installation

# npm
npm install @slashui/ray-card

# yarn
yarn add @slashui/ray-card

# pnpm
pnpm add @slashui/ray-card

Usage

import { RayCard } from "@slashui/ray-card";

function App() {
  return (
    <RayCard
      glowColor="rgba(99, 102, 241, 0.8)"
      glowMode="border"
      glowSpread={400}
    >
      <h2>Hello World</h2>
      <p>Move your cursor to see the lighting effect!</p>
    </RayCard>
  );
}

Border-Only Glow

<RayCard glowMode="border" glowColor="rgba(255, 255, 255, 0.9)">
  <p>Subtle border glow effect</p>
</RayCard>

High Intensity

<RayCard glowIntensity={1} glowSpread={500} glowColor="cyan">
  <p>Maximum glow effect</p>
</RayCard>

Props

| Prop | Type | Default | Description | | --------------- | ------------------------------ | ------------------------- | ---------------------------------- | | children | ReactNode | — | Content to render inside the card | | className | string | — | Additional CSS classes | | glowColor | string | "rgba(255,255,255,0.8)" | Color of the glow effect | | glowIntensity | number | 1 | Glow opacity (0-1) | | glowSpread | number | 300 | Size of light spread in pixels | | borderRadius | string | "16px" | Border radius of the card | | proximity | number | 32 | Mouse detection distance in pixels | | disabled | boolean | false | Disable the lighting effect | | glowMode | "both" \| "card" \| "border" | "both" | Control which parts glow | | ref | Ref<HTMLDivElement> | — | Ref to the root element | | aria-label | string | — | Accessible label for the card |

Development

Prerequisites

• Node.js 20+
• Yarn

Getting Started

# Clone the repository
git clone https://github.com/Slash-ui/RayCard.git
cd RayCard

# Install dependencies
yarn install

# Start Storybook dev server
yarn storybook

Available Scripts

| Script | Description | | ---------------------- | --------------------------------------------------- | | yarn storybook | Start Storybook dev server at http://localhost:6006 | | yarn build-storybook | Build static Storybook for deployment | | yarn test | Run tests in watch mode | | yarn test:run | Run tests once | | yarn typecheck | Run TypeScript type checking |

Project Structure

RayCard/
├── .github/workflows/     # GitHub Actions (auto-deploy to Pages)
├── .storybook/            # Storybook configuration & theme
├── src/
│   ├── assets/            # Images, logos, GIFs
│   ├── components/
│   │   ├── ray-card.tsx           # Main component
│   │   ├── ray-card.stories.tsx   # Storybook stories
│   │   ├── ferdowsi-page.tsx      # Example page
│   │   └── ferdowsi-page.stories.tsx
│   ├── css/               # Global styles, themes
│   └── utils/
│       ├── validation.ts          # Security validation
│       └── validation.test.ts     # 38 unit tests
├── package.json
└── vitest.config.ts

Security

RayCard validates all user-controlled props to prevent CSS injection attacks:

• Color validation — Hex, RGB, RGBA, HSL, HSLA, and named CSS colors
• Border radius validation — Safe CSS length values only
• Numeric clamping — Values constrained to safe ranges

Invalid inputs automatically fall back to secure defaults.

Browser Support

| Browser | Version | | ------- | ------- | | Chrome | Latest | | Firefox | Latest | | Safari | Latest | | Edge | Latest |

About Slash UI

Slash UI is a Singapore-based venture building studio that transforms startup concepts into production-ready MVPs. Founded by Amin Shariati with 20+ years of engineering experience, Slash UI partners with founders to build fast, reliable products ready to grow from day one.

What we do:

• Full-stack MVP development
• Technical co-founder services
• AI and machine learning integration
• Cloud architecture and deployment

Visit slashui.com to learn more.

License

MIT © Slash UI Pte. Ltd.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request