https://github.com/protohiro-com/effects
CSS Utils
https://github.com/protohiro-com/effects
css frontend glow gradient-border noise react-hooks reactjs spotlight ui-effects
Last synced: 3 months ago
JSON representation
CSS Utils
- Host: GitHub
- URL: https://github.com/protohiro-com/effects
- Owner: protohiro-com
- Created: 2026-02-27T09:00:41.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-06T16:32:37.000Z (3 months ago)
- Last Synced: 2026-03-06T19:25:43.037Z (3 months ago)
- Topics: css, frontend, glow, gradient-border, noise, react-hooks, reactjs, spotlight, ui-effects
- Language: TypeScript
- Homepage: https://libs.protohiro.com/effects/
- Size: 2.53 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Protohiro Effects
Protohiro Effects is a zero-wrapper React library for hard CSS effects on existing elements: gradient borders, spotlight reveal overlays, glass highlights, glow rings, and noise overlays.
Built for design systems and app UIs that need premium effects without extra DOM nodes, layout shifts, or runtime layout measurements.
## Live demo
[libs.protohiro.com/effects](https://libs.protohiro.com/effects/)
## Packages
- `@protohiro/effects-core`: shared runtime utilities.
- `@protohiro/effects`: React hooks and effect styles.
- `@protohiro/effects-demo`: local demo app.
## Quick start
```bash
pnpm install
pnpm build
```
```tsx
import { useGradientBorderEffect } from '@protohiro/effects';
function Button() {
const ref = useGradientBorderEffect({ thickness: 2, angle: 90 });
return Click;
}
```
## Why this exists
Most visual effects are easy to prototype and annoying to ship. Hand-rolled CSS often turns into:
- extra wrapper elements
- pseudo-element conflicts
- broken `border-radius` clipping
- SSR and hydration edge cases
- Safari-specific fallback work
Protohiro Effects packages those effects as React hooks that mutate only `classList` and CSS custom properties on a single existing element.
## Best-fit use cases
- `react gradient border` without wrappers
- `react spotlight reveal effect` on cards and CTAs
- `react glass highlight` for premium dark surfaces
- CSS effects for design systems and headless UI components
- composable single-element effects that preserve refs
## Hooks
### `useGradientBorderEffect(options)`
Single-element gradient border with `border-radius` support and a graceful Safari fallback.
Options:
- `thickness?: string | number`
- `radius?: string | number`
- `colors?: string`
- `angle?: string | number`
- `disabled?: boolean`
### `useGlassHighlightEffect(options)`
Adds a restrained glass highlight layer tuned for premium dark surfaces.
Options:
- `color?: string`
- `edgeOpacity?: number`
- `sheenOpacity?: number`
- `tintOpacity?: number`
- `angle?: string | number`
- `blur?: string | number`
- `radius?: string | number`
- `inset?: string | number`
- `saturate?: number`
- `disabled?: boolean`
### `useGlowEffect(options)`
Lightweight supporting glow for composition. Useful, but simpler than the core hard effects.
Options:
- `color?: string`
- `blur?: string | number`
- `spread?: string | number`
- `opacity?: number`
- `disabled?: boolean`
### `useNoiseEffect(options)`
Noise overlay for textured surfaces and layered compositions.
Options:
- `size?: string | number`
- `intensity?: number`
- `disabled?: boolean`
### `useSpotlightEffect(options)`
Interactive spotlight and reveal effect for premium cards, media, and CTA surfaces.
Options:
- `mode?: 'glow' | 'reveal'`
- `size?: string | number`
- `intensity?: number`
- `color?: string`
- `softness?: number`
- `coreIntensity?: number`
- `x?: string | number`
- `y?: string | number`
- `followPointer?: boolean`
- `revealColor?: string`
- `revealImage?: string`
- `revealSize?: string | number`
- `revealOpacity?: number`
- `disabled?: boolean`
## Safari notes
`gradient-border` uses `mask-composite` for the preferred ring rendering path. Safari fallback uses a simplified border and layered background. The fallback keeps content readable and does not hide element content.
## Positioning
This library is strongest when you need effects that are awkward to ship by hand:
- gradient borders with correct clipping
- spotlight reveal overlays
- subtle glass highlights on existing components
`glow` and `noise` are supporting effects. The main value is shipping the harder UI effects safely on a single element.
## Composability
Hooks are composable because each effect writes only namespaced classes (`pe-*`) and CSS variables (`--pe-*`).
## Quality gates
```bash
pnpm lint
pnpm typecheck
pnpm test
pnpm test:visual
pnpm size
```