Link Hub Template Template
An editorial link-in-bio page for a fashion model and lifestyle creator: a Didone contents index whose covers follow the cursor and cross-fade as you move down the list, with a shipping four-palette persona switcher.
About This Template
A complete, deployable one-page link hub for a fashion model and lifestyle creator: a fixed nav, a full-bleed portrait hero, an editorial link index, a Latest campaign block, a social row and a footer. The demo dresses it as Noor Vidal, a Milan-based model, but every word, link and photo is yours. It is styled like the contents page of a magazine, not a stack of rounded buttons: a high-contrast Bodoni Moda display over a clean Hanken Grotesk, on a glossy warm-black ground with a single champagne accent.
The index is the signature. On a laptop, a single cover photo follows your cursor down the list and cross-fades to whichever row you are over, that row's label slides toward the pointer, the other rows dim, and an underline sweeps in. On a phone, in reduced motion, or with JavaScript off, each row instead shows its cover as a small static thumbnail, so the whole index stays complete and tappable with none of the motion.
Making it yours is a photo swap and, if you like, a palette swap. Drop your campaign shots into the image slots (a bundled manifest bakes the grade so the set reads as one shoot), and rewrite the copy in your voice. The page ships four full palettes: Runway (the glossy near-black default), Neon (magenta nightlife), Editorial (a light cream print look) and Studio (calm greige). Pick one by setting data-palette on the html tag, or copy its values into the stylesheet's root.
With JavaScript off the page is a clean, readable document with every link reachable, and it deploys as static files with no build step.
What's Included
- Complete deployable link page: fixed nav, portrait hero with bio and stats, a six-row link index, a Latest campaign block, a social row and a footer
- Signature hover index: on a fine pointer one cover photo follows the cursor and cross-fades to the hovered row, with a velocity-driven tilt and a settle lag that reads as a held photograph
- Magnetic labels and a spotlight: the hovered row's Bodoni label nudges toward the cursor, the other rows dim to 0.4, and an accent underline sweeps in
- A real touch fallback: on coarse pointers, reduced motion or no-JS, every row shows its cover as a static inline thumbnail instead of the floating preview, fully tappable and good-looking
- Four shipping palettes (Runway, Neon, Editorial, Studio), each a full token block with RGB triples, switched by one data-palette attribute - a persona picker for the buyer, not demo scaffolding
- Every colour token measured as used in all four palettes; the tightest pair on the site is 4.6:1 and it is recorded in the stylesheet header
- Hero portrait parallax on scroll, kept within an overscaled frame so no edge is ever uncovered
- Designed CSS placeholders behind every image slot: a per-palette graded gradient tile so the page looks finished before the real photos are dropped in, with a bundled manifest for baking them
- Keyboard parity: rows are real links that tab and open natively, and focus mirrors the hover spotlight and preview
- Flash-free: the JS gate is set synchronously in the head, every reveal target is pre-hidden under it, and a blocked CDN degrades to the plain document
- Reduced motion renders a complete static page via both a CSS media query and the matchMedia branch
Perfect For
- Link-in-bio pages for models, influencers and lifestyle creators
- A single landing page linking a portfolio, shop edit, bookings and socials
- Photographers, stylists and makeup artists pointing to a book and a rate card
- Anyone replacing a rented link-list service with an editorial page they own
- Talent and agency profile pages that need to look like a campaign, not a form
How It Works
Structure
One script initialises everything inside a single gsap.context, with gsap.matchMedia branching on pointer type and reduced motion. Every querySelector is guarded, so the nav, hero, index, Latest block, social row and footer can each be deleted without breaking the rest. Lenis is wired in optionally and shares its clock with ScrollTrigger, so the reveals and parallax stay in step with smooth scroll.
The hover index
On a fine pointer a single fixed cover follows the cursor through gsap.quickTo, cross-fading its stacked images by autoAlpha to whichever row you are over. The same pointer move drives a velocity tilt on the preview and a magnetic nudge on the active row's label, while a data attribute dims the other rows and sweeps in an underline. It is all quickTo and quickSetter work, so no extra plugin is needed beyond ScrollTrigger.
The touch fallback
The floating preview only wakes in the fine-pointer, non-reduced branch, which is also where the inline thumbnails are hidden. On a phone, a coarse pointer, reduced motion or with no JavaScript, those thumbnails are what shows: each row carries its cover as a small static image, so the index is a complete, tappable list without any cursor work. Rows are real anchors, so they open on tap the same way they do on click.
The palette switch
Four palettes ship as data-palette blocks in the stylesheet, each restating every colour token and its RGB triple. Because every translucent rule, scrim and placeholder gradient resolves from those triples, switching palette repaints the whole page, placeholders included, with no stale colour left behind. A buyer sets one attribute on the html tag, or copies a block into the root and deletes the rest.
Reduced motion and no JavaScript
The JS gate is added synchronously in the head so reveal start states apply before first paint, and the script removes it if the GSAP CDN fails, degrading to the plain document. Reduced motion restores every pre-hidden reveal through both a CSS media query and the matchMedia branch, and renders the static thumbnail index. With JavaScript off the page is a clean, readable document with every link reachable.
:root.
Try them in the preview above.