Demos & Prototypes

Inspectable Motion Samples.

A sandbox of high-performance layout, background, scroll, and audio components. Every sample operates with clean typography, accessibility hooks, responsive layouts, and offline-safe code scaffolding.

12 examples

Smp-01background

Video Background

Ambient background video loop with customized blur, contrast filters, and mobile fallbacks.

Best Use Case: Hero sections looking for organic or high-end luxury aesthetic.

EasyCSSHTML5 Video / Canvas

Smp-02text

Split Text Reveal

Letter, word, and line reveal staggered transition sequences with accessible markup.

Best Use Case: Stately headlines or editorial about manifestos.

MediumCSS TransitionsReact State

Smp-03scroll

Scroll Trigger portal

A pinned scrub animation that zooms through a vector portal as the page scrolls down.

Best Use Case: Campaign reveals or key immersive landing transitions.

MediumGSAPScrollTrigger

Smp-04svg

SVG Path Text Marquee

Text sliding along custom curves wrapped around interactive design badges or thumbnails.

Best Use Case: Case-study links, showreel thumbnails, or rotating seals.

MediumSVG textPathCSS Offset

Smp-05portfolio

Project Hover Index

Clean project title list where hovered items dim siblings and trigger follow-pointer visuals.

Best Use Case: Main portfolio index pages looking for rapid visual feedback.

MediumCSS :hasReact Proximity JS

Smp-06editorial

Impact Counters Grid

Bento grid layout featuring dynamic metric counters that run once scrolled into view.

Best Use Case: Summit reports, results cards, and campaign statistic boxes.

EasyCSS GridIntersection Observer

Smp-07navigation

Expanding Pill Menu

Fixed navigation pill menu that morphs into a full-page menu overlay on selection.

Best Use Case: Minimalist portfolio menus or mobile-first navigation headers.

MediumCSS Clip-pathReact FocusTrap

Smp-08audio

Audio Entry Loader

A sound / silent entry gate requiring active visitor choice before initializing audio visualizers.

Best Use Case: Immersive showreels and agency homepage loads.

EasyWeb Audio APILocalStorage

Smp-09portfolio

Architecture Index

Taxonomy index filtering counts with metadata row animations and layout alignment.

Best Use Case: High-end studios with structural/categorical catalogs.

MediumReact HooksCSS Flexbox

Smp-10editorial

Concept Essay Strip

Editorial layout presenting content paired with a staggered sliding image ribbon.

Best Use Case: Manifestos, studio beliefs, or design columns.

EasyCSS ParallaxIntersection Observer

Smp-11editorial

Team Roster Grid

Profile roster grid featuring detailed roles and an expandable alumni collaborator stack.

Best Use Case: Agency culture sections, team rosters, and agency credits.

EasyCSS Flex/Grid

Smp-12media

Motion Case Study

Video playback showcase detailing video aspect ratios and inline thumbnail styleframe cards.

Best Use Case: Case study walkthroughs or high-impact video reels.

MediumHTML5 VideoGrid styleframes