Pin
Thin ergonomic wrapper around ScrollTrigger's pin option — keeps a section visible while you scroll past it.
Scroll down — the orange band stays pinned for one viewport.
Pinned section
Content after the pin.
Usage
import { Pin } from '@bwo-ui/react';
<Pin end="+=200%">
<section className="hero">...</section>
</Pin>Props
| Prop | Type | Default | Description |
|---|---|---|---|
start | string | 'top top' | ScrollTrigger start. |
end | string | '+=100%' | Distance to keep pinned (any ScrollTrigger end value). |
pinSpacing | boolean | true | Add padding so following content does not jump. |
enableMedia | string | — | Media query gate — pin only when matched. |
anticipatePin | number | 0 | Smoother handling on fast scroll. |