No-5 Vault

May 11, 2026

HEROES

Hero About

Scroll-driven parallax hero where a full-bleed video shrinks and zooms out as text transitions from white-on-video to black-on-white. Three-column layout with staggered divider and description reveals in the final 30% of scroll. Separate stacked mobile layout with scroll-triggered entrances.

May 11, 2026

HEROES

Hero Home

Full-viewport video hero with inset rounded background on desktop, large fluid display typography stacked line-by-line, and a glassmorphic CTA card anchored bottom-right. Inspired by Wolverine Worldwide's homepage.

May 11, 2026

SECTIONS

Dual Push Cards

Two-up CTA card section with scroll-driven parallax on each card's background image. Cards scale down and drift vertically as you scroll past. Glassmorphic blur buttons at bottom-left. Stacks on mobile, side-by-side grid on desktop.

May 4, 2026

HEROES

Hero Brand

A full-viewport brand hero section with large statement headline, live clock, and CTA bar. Supports three color variants (default yellow, dark, sage green) and optional background image.

May 4, 2026

NAVIGATION

Nav Slide Panel

A minimal header that slides in from the top on load. Desktop shows logo, nav links, language switcher, and underlined contact CTA. Mobile collapses to logo + menu toggle with a full-screen white panel featuring large stagger-animated nav links, office locations, language selector, and copyright.

May 4, 2026

SECTIONS

Portfolio Grid

A responsive portfolio showcase section with a header tagline, blinking cursor counters, a 2-up/4-col project card grid with hover-zoom images and data-label metadata, plus a full-width CTA button. Scroll-triggered fade and move-up animations via GSAP.

May 1, 2026

SECTIONS

Logo Wall Cycle

A responsive logo grid that cycles through brand logos with smooth GSAP-powered swap animations. Shows 8 logos on desktop and 6 on tablet, shuffling hidden logos into view on a timed loop. Pauses when out of viewport or tab is hidden.

Apr 27, 2026

ANIMATIONS

Cursor Hover Label

A custom cursor label that follows the mouse and fades in when hovering trigger elements. Uses GSAP quickTo for smooth tracking. Trigger elements use data-cursor-label attributes to set label text. Inspired by portfolio/agency sites like Studio PIC.

Apr 27, 2026

ANIMATIONS

Section Transition 01

GSAP ScrollTrigger-based section transition system. Sibling sections opt into parallax, pin, or reveal modes via data attributes. Supports y offset, overlay opacity, and overlay color per section. Mobile strategy simplifies motion on smaller screens.

Apr 27, 2026

ANIMATIONS

Text Reveal 01

GSAP SplitText-based text reveal system. Text elements opt in with data-reveal-01 and split into lines, words, or characters. Supports load-time reveals, scroll-triggered reveals, scrubbed scroll reveals, and manual split-only mode for custom timelines. Per-element overrides for duration, stagger, delay, ease, and replay behavior.

Apr 27, 2026

HEROES

Hero 01

Full-viewport hero with a GSAP clip-path reveal on the background image, overlay fade-in, and SplitText line-by-line text entrance. The media layer expands from a narrow vertical slit to full screen while the image scales down then back up.

Apr 27, 2026

NAVIGATION

Nav Agency Grid

A fixed agency-style navigation bar using a 4-column CSS grid with staggered GSAP entrance animations, current-page indicator with animated dash, scroll-direction hide/show, desktop hover dropdown, and a full-screen mobile menu with large typography.

Apr 27, 2026

SECTIONS

Case Overview Scroll

Full-viewport stacked case study slider. Each slide is sticky and its image receives scroll-driven translateY and scale transforms, creating a parallax depth effect as slides layer over each other. Inspired by DashDigital's case overview pattern.

Apr 27, 2026

SECTIONS

Slide Pillars

A scroll-driven services section with cycling headings, animated counter with progress bar, and staggered service lists that slide in and out per pillar. Pinned full-viewport layout with left info column and right service list column.

Apr 24, 2026

NAVIGATION

Nav Glassmorphic

A floating glassmorphic navigation bar with frosted semi-transparent background, centered nav links, locale selector, and outlined CTA button. Collapses to logo + hamburger on mobile with an expanding panel featuring nav links, social links, and email.

Apr 22, 2026

SECTIONS

Process Steps

A centered editorial heading with a 3-column numbered process grid below. Each step has a large serif number, title, and description. Configurable background color.

Apr 21, 2026

SECTIONS

Editorial Intro

A centered editorial text block with uppercase label, large serif heading with italic emphasis, and a description with inline bold. Configurable background color. Reusable as a section divider or philosophy statement.

Apr 21, 2026

SECTIONS

Instagram Feed

A 5-column Instagram post grid with handle, serif heading, and CTA link. Supports both images and videos per card. Hardcoded posts with commented-out Instagram Graph API and Behold integration paths.

Apr 21, 2026

SECTIONS

Product Feature Grid

A 3-column product feature section with centered badge overlays on product images, serif heading with italic emphasis, description, and a CTA button. Cream background, editorial styling. Shopify CMS-ready.

Apr 21, 2026

SECTIONS

Testimonial Grid

A 3-column testimonial card grid with star ratings, italic serif quotes, and attribution lines. Warm cream background with white cards. Shopify CMS-ready with commented integration code for metaobjects and review apps.

Apr 16, 2026

SECTIONS

About Intro

A 12-column grid about section with a line-mask heading reveal, responsive text, and a sticky autoplay video on the right column. Stacks to single column on mobile with video above text.

Apr 14, 2026

HEROES

Video Strip Reveal

A pinned full-viewport hero with a video revealed through sliding horizontal strips. Text lines animate in on load, and scroll-driven parallax shifts the copy and video as the user scrolls. Two-column on desktop, overlaid text on mobile.

Apr 14, 2026

SECTIONS

Parallax Image Band

A full-width image band with CSS background-attachment: fixed parallax on desktop. Pure CSS, no JavaScript. Configurable section and band heights.

Apr 14, 2026

SECTIONS

Services Accordion

A services section with a large SplitText heading reveal, description, and expandable accordion rows. Each row fills with a black panel on hover, inverting text to white. Expanded state reveals a description and a responsive grid of sub-services.

Apr 14, 2026

SECTIONS

Who We Are

A full about section with SplitText heading and subheading reveals, two-column content rows for approach and collaboration, a 3-column founders portrait grid with hover scale, and a pill CTA button.

Apr 13, 2026

SECTIONS

About Section

A two-column about section with a full-bleed image on one side and centered text on the other. Supports reversible layout and mobile text truncation with a read-more toggle.

Apr 13, 2026

SECTIONS

Blog Grid Reveal

A typographic blog grid with inline images embedded in large text links. Each row slides up into view on scroll via GSAP ScrollTrigger. Rows alternate alignment and images react on hover with rotation and opacity.

Apr 13, 2026

SECTIONS

Gallery Image Reveal

A vertical project gallery where each row shows a split title with an image that expands on hover using GSAP. Clean, minimal layout for featured work sections.

Apr 13, 2026

SECTIONS

Sticky About

A scroll-pinned two-column section with a stacked image gallery on the left and matching text on the right. Scroll snaps between items with clip-path reveal transitions and a progress bar. Collapses to full-screen stacked cards on mobile.

Apr 11, 2026

CARDS

Product Card

Full-bleed product card with background image, overlay logo/price, and a CTA button. Switches from overlay mode (tablet/mobile) to a right-panel info layout (wide desktop). Ready to wire to Shopify Storefront API.

Apr 11, 2026

CARDS

Product Card Grid

3-column product grid with square image cards and a bottom info strip showing title and price. Collapses to 2 columns on mobile. Ready to wire to Shopify Storefront API or any product collection endpoint.

Apr 10, 2026

CARDS

Article Grid

A responsive grid of article cards with image, title, and excerpt. Accepts any number of articles and a configurable column count. Ready to wire to a CMS — swap the static array for a data fetch.

Apr 10, 2026

HEROES

Video Hero

Full-width hero section with an autoplay background video, optional heading, and a CTA button with a slide-up hover animation. Aspect ratio and object position are configurable via props.

Apr 10, 2026

LAYOUT

Card Slider

A draggable horizontal card slider built with GSAP Draggable and InertiaPlugin. Supports snap-to-slide, momentum scrolling, mousewheel, keyboard navigation, and prev/next buttons. Responsive slide width via CSS container queries.

Apr 10, 2026

NAVIGATION

Nav Minimal

A clean top navigation bar with logo (image or text), centered nav links with hover-reveal submenu row, locale switcher, and account/cart icons. Collapses to logo + cart + hamburger on mobile.

Apr 10, 2026

SECTIONS

Centered Intro

A centered editorial section with a large heading, bold body paragraph, and a full-width image. On desktop the text sits above the image; on mobile the image slots between heading and body.

Apr 10, 2026

SECTIONS

Video Media Section

A full-width video section with lazy loading via IntersectionObserver. The video source is only fetched when the section scrolls into view, then autoplays muted and looped.

Apr 10, 2026

SHOPIFY

Product Detail Page

A Shopify-style product detail page with a sticky sidebar, variation selectors (size, handlebar), gallery, and a specs table. Two-column layout: scrollable left content column, fixed-width sticky right sidebar.

Apr 9, 2026

ANIMATIONS

Cascading Slider

GSAP-driven carousel that positions slides across 7 slots (active, left/right siblings, far left/right, and two hidden staging slots). Slides clip-path into view as they move, with the active slide title fading in after the transition completes. Keyboard and click navigable.

Apr 9, 2026

ANIMATIONS

Floating Gallery

Three-layer parallax image gallery driven by mouse movement. Each plane moves at a different speed (1×, 0.5×, 0.25×) with lerp-based momentum decay. Requires a parent container with defined height.

Apr 9, 2026

ANIMATIONS

Highlight Text

A polymorphic text wrapper that uses GSAP SplitText and ScrollTrigger scrub to fade each character in as you scroll. Works on any heading or paragraph element via the `as` prop.

Apr 9, 2026

ANIMATIONS

Horizontal Scroll

Full-viewport horizontal scroll section driven by GSAP ScrollTrigger. Panels are pinned and translated on the x-axis as you scroll vertically. Stacks vertically on mobile.

Apr 9, 2026

ANIMATIONS

Looping Words

A word-cycling component that scrolls through a list vertically using elastic easing. An underline selector animates its width to match each incoming word. Works inline inside headings or as a standalone element.

Apr 9, 2026

ANIMATIONS

Parallax Gallery

Four-column image grid where each column scrolls at a different speed using GSAP ScrollTrigger. Columns are offset vertically and move at multiplied rates, creating a depth-layered parallax as you scroll.

Apr 9, 2026

ANIMATIONS

Pixelate Image

Canvas-based pixelation reveal for images. Renders the image through progressively finer pixel grids until sharp. Supports inview, hover, click, and load triggers. Zero dependencies — pure canvas and requestAnimationFrame.

Apr 9, 2026

ANIMATIONS

Refracted Glass

Glass distortion effect rendered entirely with SVG filters — no libraries or external services. feTurbulence generates organic noise, feDisplacementMap warps the image through it, and an animated baseFrequency gives the glass a slow, living shift over time.

Apr 9, 2026

ANIMATIONS

Reveal Group

A polymorphic scroll-reveal wrapper that staggers each direct child into view on scroll. Supports nested groups via RevealNested, per-slot stagger/distance overrides, includeParent, and data-ignore to skip elements. Respects prefers-reduced-motion.

Apr 9, 2026

ANIMATIONS

Rotating Text

A heading component that cycles through a list of words in-place using a masked slide-up/down transition. Width animates smoothly between words. Supports optional before/after static text to build full sentences.

Apr 9, 2026

ANIMATIONS

Shutter Section

Scroll-driven venetian-blind effect using GSAP ScrollTrigger. Horizontal rows animate their scaleY to reveal or cover a full-viewport media section as the user scrolls. Supports image and video, two modes (reveal / cover), and responsive row counts.

Apr 9, 2026

LAYOUT

Layout Grid Flip

A card grid that animates between large (3-col) and small (5-col) layouts using GSAP Flip. Cards reflow with a smooth positional tween and the container height animates in sync. Subtitle text fades out in small view. Respects prefers-reduced-motion.

Apr 9, 2026

MEDIA

Double Gallery

Pairs of images that redistribute their widths as you move the mouse across the screen. The dominant image shrinks as the secondary expands, using lerp-smoothed requestAnimationFrame. Pairs alternate between 66/33 and 33/66 splits.

Apr 9, 2026

MEDIA

Masonry Grid

CSS-variable-driven masonry layout calculated in JavaScript. Columns and gaps are controlled via custom properties, items are absolutely positioned into the shortest column, and the grid reflows on resize. Supports four aspect-ratio variants per item: default (3/4), square, wide, and tall.

Apr 9, 2026

NAVIGATION

Nav Bar

Fixed transparent navbar with name/role on the left, flip-text navigation links in the center, and a live EST clock on the right. Hover reveals a growing underline and a vertical text flip. Active link state is driven by URL hash.

Apr 9, 2026

NAVIGATION

Nav Menu Panel

Fixed header bar with a centered menu toggle that expands a full-width slide-down panel. Panel contains large flip-text nav links, contact info, and image cards. CSS grid accordion for the open/close animation, flip-text hover effect on links, green accent square on active/hover state.

Apr 9, 2026

SECTIONS

FAQ Section

Two-column FAQ layout with a sticky heading on the left and an accordion list on the right. Expand/collapse is driven by CSS grid-template-rows animation — no JavaScript animation library needed. Items, questions, and answers are fully prop-driven.

Apr 9, 2026

SECTIONS

Flip Scale Section

A two-section layout where a small media element grows to fill the screen as you scroll. Uses GSAP Flip to smoothly interpolate position and size between two layout states, driven by ScrollTrigger scrub.

Apr 9, 2026

SECTIONS

Line Reveal Testimonials

Full-width testimonial slider with GSAP SplitText line-mask transitions. Each slide's quote and author details animate in line-by-line, with the avatar revealed via a circular clip-path. Supports autoplay, keyboard navigation, and reduced-motion.

Apr 9, 2026

SECTIONS

Testimonial Slider

Infinite draggable testimonial carousel powered by GSAP's horizontalLoop utility. Supports autoplay with scroll-trigger pause/resume, inertia-based drag with snapping, bullet avatar navigation, prev/next controls, and an orange corner-bracket accent on the active slide.

Apr 8, 2026

ANIMATIONS

Blurry Cursor

A custom cursor that uses GSAP and linear interpolation (lerp) for a smooth trailing follow effect. When the cursor enters the heading, it expands to 400px and blurs, creating a color-inverted spotlight via mix-blend-mode: difference.

Apr 8, 2026

ANIMATIONS

Clip-Path Inset Reveal

An element starts fully clipped with inset() and reveals as it enters the viewport. Clean entrance that feels like content appearing from behind a mask. Driven by scroll progress.

Apr 8, 2026

ANIMATIONS

Clip-Path Polygon Card Reveal

Image cards are collapsed to a single center point using clip-path polygon and expand to full size as they enter the viewport. Combined with scale animation. Triggered by IntersectionObserver.

Apr 8, 2026

ANIMATIONS

Clip-Path Polygon Video Reveal

Image or video is collapsed to a horizontal line using clip-path polygon. On hover it expands to full rectangle while rising upward. A distinctive hover interaction using pure CSS.

Apr 8, 2026

ANIMATIONS

GSAP Crossfade Transition

Current page fades to opacity 0, new page content swaps in, wrapper fades back to opacity 1. TransitionContext shares a GSAP timeline via React Context so each page can register exit animations.

Apr 8, 2026

ANIMATIONS

CSS Sticky Video

A video/image panel sticks at a calculated position near the bottom of the viewport while text scrolls alongside it. No JavaScript required — achieved with position:sticky and calc().

Apr 8, 2026

ANIMATIONS

Curve SVG Wipe

A curved SVG shape sweeps up across the screen between pages. The path morphs from a wave shape to a flat edge as it exits, creating a fluid organic transition. Window dimensions are used to calculate the SVG path dynamically.

Apr 8, 2026

ANIMATIONS

Divider Width Expand

Horizontal line expands from 0% to 100% width when a section is opened. Used as a visual separator animation for accordion-style toggles.

Apr 8, 2026

ANIMATIONS

Emoji Pill Spring Reveal

A hidden pill element sits behind a button rotated 180deg and scaled to zero. On hover it spins to 0deg, scales to full size, and springs into view using a Framer Motion spring transition.

Apr 8, 2026

ANIMATIONS

Heading Scroll Parallax

Oversized display headings drift vertically at different rates as you scroll, creating layered depth. Each heading moves independently using useTransform with unique y ranges.

Apr 8, 2026

ANIMATIONS

Image Scale on Hover

Image starts slightly scaled up (1.1) inside an overflow-hidden container and returns to scale(1) on hover. The container clips the overflow, giving the image room to breathe inward.

Apr 8, 2026

ANIMATIONS

Inner Perspective Transition

A slide panel covers the screen while the current page scales back and fades, creating a depth/perspective effect. Three simultaneous Motion animations: slide overlay, page scale-back, and opacity fade on enter.

Apr 8, 2026

ANIMATIONS

Label Rollover

Two identical text labels stacked vertically in an overflow-hidden container. On hover the stack slides up revealing the duplicate below, creating an infinite-loop text swap effect. Pure CSS.

Apr 8, 2026

ANIMATIONS

Parallax Image in Card

Image inside a fixed-height card travels at a different speed to the card as you scroll, creating a depth effect. Image is 120% height of the card container to give room for movement.

Apr 8, 2026

ANIMATIONS

Parallax Scroll

A section with large headings, letter-by-letter random parallax offsets, and three images drifting upward at different speeds (0, -150px, -250px) as you scroll. Uses Framer Motion useScroll and useTransform.

Apr 8, 2026

ANIMATIONS

Pixel Blocks Transition

A menu overlay built from 20 columns of square pixel blocks. When toggled, blocks fade in with shuffled random delays (Fisher-Yates) creating a scattered fill effect. The menu fades in after the pixels settle, then reverses on close.

Apr 8, 2026

ANIMATIONS

Pixel Curtain Transition

A directional variant of the pixel blocks transition. On open, 20 columns of pixel blocks sweep in left-to-right using the column index as delay (0.05s × col). On close, they sweep out right-to-left using the reversed index — creating a curtain effect.

Apr 8, 2026

ANIMATIONS

Pixel Grid Transition

Full-viewport grid of colored blocks that fades in randomly on navigation and out on page load, creating a pixelated wipe effect. Grid density adapts to the container size.

Apr 8, 2026

ANIMATIONS

Scale + Slide From Left Transition

Page elements scale up from zero and slide in from the left while fading in. Long 0.25s stagger gives a theatrical, sequential feel. Most dramatic of the GSAP transition patterns.

Apr 8, 2026

ANIMATIONS

Scale Up Transition

Page elements scale up from 0.8 and fade in on enter, giving a zoom-in feel on arrival. Exit is a shared opacity fade. gsap.fromTo with stagger creates sequential reveal.

Apr 8, 2026

ANIMATIONS

Slide Up Transition

Page elements slide up from below and fade in on enter. Exit is a shared opacity fade. gsap.fromTo targets all page elements with a 0.1s stagger creating a sequential cascade.

Apr 8, 2026

ANIMATIONS

SplitText Line Reveal

Paragraph text is split into individual lines. Each line slides up from below its overflow-hidden mask container as the section enters the viewport. Uses a manual canvas-based line splitter (no paid plugin required).

Apr 8, 2026

ANIMATIONS

Stairs Wipe

5 full-height columns cascade down in a staircase sequence wiping the screen black, then reveal the new page. Each column has a custom delay of 0.05 * (5 - index) for the staircase order.

Apr 8, 2026

ANIMATIONS

Big Typo Scroll Preview

Large-type scrollable project list where hovering (desktop) or scrolling to center (touch) reveals a clipped image preview. Infinite scroll via Lenis with a polygon clip-path reveal animation.

Apr 8, 2026

ANIMATIONS

View Transitions API

Old page scales down and slides up off screen. New page slides in from below. Uses the browser's native View Transitions API with document.startViewTransition(). No overlay components needed.

Apr 8, 2026

ANIMATIONS

Zoom Parallax

Five images sit in a sticky viewport. As you scroll through 300vh, each image scales up at a different rate. The center image scales 1→4 to fill the screen; outer images scale faster (up to 1→9), flying past the frame.

Apr 8, 2026

BUTTONS

Button Bubble Arrow

On hover, a leading arrow circle scales in from the left while the duplicate arrow on the right scales out. The label slides from behind the right arrow using a translateX transition. Pure CSS.

Apr 8, 2026

HEROES

Header Text Line Reveal

Header text lines slide up from below overflow-hidden parent containers on mount. Each line is clipped by its outer container and animates in with a slight stagger using GSAP.

Apr 8, 2026

LAYOUT

Infinite Ticker

An infinitely scrolling horizontal text ticker that loops seamlessly. Items are duplicated and a CSS animation shifts the track by exactly 50%, creating a gapless loop without JavaScript.

Apr 8, 2026

NAVIGATION

Staggered Nav Dock Entrance

Nav dock items stagger in on first page load with a delay after the loading screen completes. Each item fades up with a 1s duration entrance curve and 3s initial delay, 0.08s stagger.

Apr 8, 2026

SECTIONS

Counter Loading Screen

A numeric counter ticks from 0 to 100 during a loading screen using GSAP's object tweening, then the screen wipes away with a yPercent animation to reveal the page beneath.

Apr 8, 2026

SECTIONS

Full Orchestrated Load Sequence

A complete timed entrance sequence: loading screen holds for 2.5s, wipes away, then all page elements (headline, subtext, nav items) stagger in with coordinated timing via a GSAP timeline.

Apr 8, 2026

SECTIONS

Sticky Cards Parallax

Cards stack as you scroll — each sticks to the top while the next one slides underneath. The image inside each card zooms from 2× to 1× as the card settles, and previous cards scale down slightly as new ones arrive.

Apr 7, 2025

CARDS

Card Overlay Fade

A semi-transparent dark overlay with backdrop blur appears over a card on hover. Frames the card content and creates depth by softening the background image. Source: itsjay.us work cards.

Apr 7, 2025

FOOTERS

Footer Parallax Text

Large background text in footer drifts vertically as you scroll past it, creating a layered depth effect behind the footer content. Source: itsjay.us footer section.

Apr 7, 2025

NAVIGATION

Nav Panel Height Expand

A hidden nav panel animates from height:0 to height:auto when the menu is opened. Simultaneously fades in. Collapses back on close. Source: itsjay.us nav dock menu open.