KQ-1366 · FOIL/SHEEN
Foil Sheen
Type hot-stamped in metal foil: the letters are painted with the tint's pigments at fixed lightnesses in broad reflective bands, and a specular band — a soft glow leading a brighter core broken into grain by a seeded micro-texture — sweeps across them at an interval on the move ease. The pointer tilts the light on the glide spring and shifts the foil's broad reflections, and a press catches the light with a sweep from the side you pressed. A keyboard handle tilts the light with Left and Right and sends a sweep with Enter.
KQ-1366 · FOIL/SHEEN
Fernworks Press · Edition of 200
Pressed in gold leaf.
Left and Right tilt the light across the foil; Enter sends it across the letters.Hand-set, foil-stamped, numbered by the press.
gold foil · light at 18° · move to tilt it
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/foil-sheen
Props
- children
- string
- default —
- The line, as a string. Wins over text.
- text
- string
- default —
- The line, when it is not given as children.
- as
- "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
- default "p"
- The element that carries the line.
- tint
- "gold" | "silver" | "rose" | "bronze" | string
- default "gold"
- The foil: a preset or any CSS colour, mixed at fixed lightnesses so it reads in both themes.
- speed
- number
- default 1
- How fast the light crosses the letters, 0.25 to 3 (1 takes 1.4 s).
- angle
- number
- default 18
- The light band's lean off vertical, degrees.
- interval
- number
- default 3600
- Rest between sweeps, ms.
- band
- number
- default 16
- The band's width, % of the line.
- intensity
- number
- default 0.85
- How bright the reflection runs, 0 to 1.
- grain
- number
- default 0.55
- How much the micro-texture breaks the reflection into grain, 0 to 1.
- tilt
- number
- default 28
- How far the pointer tilts the light, degrees either way.
- seed
- number
- default 7
- Seed for the foil's micro-texture.
- emboss
- boolean
- default true
- Seat the foil on the page with a faint pressed edge.
- interactive
- boolean
- default true
- The pointer tilts the light and a press catches it; keys do the same.
- paused
- boolean
- default false
- Hold the light where it rests; no sweeps.
- sweepKey
- number | string
- default —
- Change it to send a sweep across now, as a press would.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- When the first sweep runs.
- once
- boolean
- default true
- True: the trigger starts the sweeps once and they keep their interval. False: re-entering view or hovering also sends a sweep at once.
- delay
- number
- default 0
- Wait before the first sweep, ms.
- play
- boolean
- default false
- With trigger "manual": true starts the sweeps, false rests the light.
- onComplete
- () => void
- default —
- The first sweep has crossed the line.
- className
- string
- default —
- Classes for the root; set the type here.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | — | The line, as a string. Wins over text. |
| text | string | — | The line, when it is not given as children. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "p" | The element that carries the line. |
| tint | "gold" | "silver" | "rose" | "bronze" | string | "gold" | The foil: a preset or any CSS colour, mixed at fixed lightnesses so it reads in both themes. |
| speed | number | 1 | How fast the light crosses the letters, 0.25 to 3 (1 takes 1.4 s). |
| angle | number | 18 | The light band's lean off vertical, degrees. |
| interval | number | 3600 | Rest between sweeps, ms. |
| band | number | 16 | The band's width, % of the line. |
| intensity | number | 0.85 | How bright the reflection runs, 0 to 1. |
| grain | number | 0.55 | How much the micro-texture breaks the reflection into grain, 0 to 1. |
| tilt | number | 28 | How far the pointer tilts the light, degrees either way. |
| seed | number | 7 | Seed for the foil's micro-texture. |
| emboss | boolean | true | Seat the foil on the page with a faint pressed edge. |
| interactive | boolean | true | The pointer tilts the light and a press catches it; keys do the same. |
| paused | boolean | false | Hold the light where it rests; no sweeps. |
| sweepKey | number | string | — | Change it to send a sweep across now, as a press would. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | When the first sweep runs. |
| once | boolean | true | True: the trigger starts the sweeps once and they keep their interval. False: re-entering view or hovering also sends a sweep at once. |
| delay | number | 0 | Wait before the first sweep, ms. |
| play | boolean | false | With trigger "manual": true starts the sweeps, false rests the light. |
| onComplete | () => void | — | The first sweep has crossed the line. |
| className | string | — | Classes for the root; set the type here. |