Dark surfaces now carry light: frames glow along their edge and shed binary digits (BitAura), dark sections open with a lit seam (BitSeam), the career path is a line of light and "My work" became a dark stage. Buttons carry a travelling light and a spot that follows the pointer (BitGlow). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
18 lines
525 B
TypeScript
18 lines
525 B
TypeScript
import * as React from "react";
|
|
import { BitAura } from "./BitAura";
|
|
|
|
/**
|
|
* BitSeam: a lit top edge for a dark section, with digits drifting down from it.
|
|
* The section needs `relative` and has to clip its overflow.
|
|
*/
|
|
export const BitSeam: React.FC<{ density?: number }> = ({ density = 0.4 }) => (
|
|
<div
|
|
className="pointer-events-none absolute inset-x-0 top-0"
|
|
aria-hidden="true"
|
|
>
|
|
<BitAura source="bottom" tone="dark" radius={0} density={density}>
|
|
<div className="h-0" />
|
|
</BitAura>
|
|
</div>
|
|
);
|