Signature / Moleculestable

Prism Border

Animated rainbow refraction border using a shifting linear gradient.

@glinui/uiComponent: prism-border

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add prism-border

Usage$

Wrap any content with PrismBorder to add an animated rainbow refraction border. Uses CSS mask compositing for the hollow border effect.

Basic$

Prism Card

Rainbow border effect.

TSX

1import { PrismBorder } from "@glinui/ui"
2
3export function PrismBorderDemo() {
4return (
5  <div className="flex items-center justify-center p-8">
6    <PrismBorder className="w-64">
7      <div className="rounded-xl bg-neutral-900 p-6 text-center">
8        <h3 className="text-lg font-semibold text-white">Prism Card</h3>
9        <p className="mt-2 text-sm text-neutral-400">Rainbow border effect.</p>
10      </div>
11    </PrismBorder>
12  </div>
13)
14}

Examples$

Thicker Border$

Thick Border

4px border, 2s animation.

TSX

1import { PrismBorder } from "@glinui/ui"
2
3export function PrismBorderThickDemo() {
4return (
5  <div className="flex items-center justify-center p-8">
6    <PrismBorder borderWidth={4} duration={2}>
7      <div className="rounded-xl bg-neutral-900 p-6 text-center">
8        <h3 className="text-lg font-semibold text-white">Thick Border</h3>
9        <p className="mt-2 text-sm text-neutral-400">4px border, 2s animation.</p>
10      </div>
11    </PrismBorder>
12  </div>
13)
14}

Custom Colors$

Cool Tones

Custom gradient colors.

TSX

1import { PrismBorder } from "@glinui/ui"
2
3export function PrismBorderCustomDemo() {
4return (
5  <div className="flex items-center justify-center p-8">
6    <PrismBorder colors={["#06b6d4", "#3b82f6", "#8b5cf6", "#06b6d4"]}>
7      <div className="rounded-xl bg-neutral-900 p-6 text-center">
8        <h3 className="text-lg font-semibold text-white">Cool Tones</h3>
9        <p className="mt-2 text-sm text-neutral-400">Custom gradient colors.</p>
10      </div>
11    </PrismBorder>
12  </div>
13)
14}

Accessibility$

The animated border element is aria-hidden="true" — invisible to assistive technologies.
Content inside the border wrapper remains fully accessible.

Reduced Motion$

The gradient animation is paused via motion-reduce:[animation:none]. A static gradient border remains visible.

API Reference$

Prop	Type	Required	Default	Description
`borderRadius`	`string`	No	`"0.75rem"`	Border radius
`borderWidth`	`number`	No	`2`	Border width in px
`colors`	`string[]`	No	`["#f43f5e", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#6366f1", "#a855f7", "#f43f5e"]`	Custom gradient colors
`duration`	`number`	No	`3`	Animation duration in seconds

Source$

TSX

1import { PrismBorder } from "@glinui/ui"

packages/ui/src/components/prism-border.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/prism-border.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

PrismBorderProps

`PrismBorderProps`

Prop	Type	Required	Default	Description
`borderRadius`	`string`	No	`"0.75rem"`	Border radius
`borderWidth`	`number`	No	`2`	Border width in px
`colors`	`string[]`	No	`["#f43f5e", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#6366f1", "#a855f7", "#f43f5e"]`	Custom gradient colors
`duration`	`number`	No	`3`	Animation duration in seconds