@pagix/pinned-reveal-hero
v0.1.0
Published
Anvilkit Puck-native scroll-pinned reveal hero — Huawei Pura-style text-to-image reveal driven by GSAP ScrollTrigger. RSC-safe.
Readme
@pagix/pinned-reveal-hero
Anvilkit Puck-native scroll-pinned reveal hero. Renders a layered composition (eyebrow + multi-segment headline + reveal image) that scrolls into view with a Huawei Pura-style "text → image" reveal driven by GSAP ScrollTrigger.
RSC-safe: no "use client", no React hooks, no client-only dependencies.
The animation runs from an inline <script> stamped at render time and is
auto-disabled when editMode is true (Puck canvas) so the editor scroll is
never locked.
Usage
In a Puck config:
import {
createPinnedRevealConfig,
defaultProps,
} from "@pagix/pinned-reveal-hero";
const pinnedRevealHero = createPinnedRevealConfig();
// add `pinnedRevealHero` to your `components` mapRequired runtime dependency
GSAP and ScrollTrigger are loaded from CDN by the host page; the package
itself does not bundle them. Add to your document <head>:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>If they are not present, the inline script logs a warning and the section falls back to the static layout.