43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import type { CSSProperties } from 'react';
|
|
|
|
type WordmarkProps = {
|
|
size?: number;
|
|
cursor?: boolean;
|
|
animated?: boolean;
|
|
ariaLabel?: string;
|
|
};
|
|
|
|
/**
|
|
* VYNDR wordmark. IBM Plex Mono 800, RGB-split letters, glowing R, blinking cursor.
|
|
* The R is the brand — always green (#00D4A0), always intercepted-looking.
|
|
* `aria-label` exposes the readable brand to screen readers; per-letter spans are aria-hidden.
|
|
*/
|
|
export default function Wordmark({
|
|
size = 22,
|
|
cursor = true,
|
|
animated = true,
|
|
ariaLabel = 'VYNDR',
|
|
}: WordmarkProps) {
|
|
const style: CSSProperties & { '--wm-size'?: string } = {
|
|
fontSize: size,
|
|
'--wm-size': `${size}px`,
|
|
};
|
|
return (
|
|
<span
|
|
className={`wordmark${animated ? ' wm-anim' : ''}`}
|
|
style={style}
|
|
role="img"
|
|
aria-label={ariaLabel}
|
|
>
|
|
<span className="vynd" aria-hidden>
|
|
<span className="wm-letter" data-text="V">V</span>
|
|
<span className="wm-letter" data-text="Y">Y</span>
|
|
<span className="wm-letter" data-text="N">N</span>
|
|
<span className="wm-letter" data-text="D">D</span>
|
|
</span>
|
|
<span className="r wm-letter" data-text="R" aria-hidden>R</span>
|
|
{cursor ? <span className="wm-cursor" aria-hidden /> : null}
|
|
</span>
|
|
);
|
|
}
|