A playground for every motion pattern
Scroll through to preview hero entrances, sticky-pin crossfades, scroll reveals, hover effects, animated counters, and parallax — all in isolation.
Sticky-pin crossfade
Image stays pinned, text scrolls, image crossfades.
Pinned image, scrolling story
As you scroll, the image on the left stays pinned in place while text panels glide past on the right. Classic Apple product-page pattern.
Subtle image transitions
Each text panel triggers a soft scale + opacity crossfade on the image, so the visual stays in sync with what you are reading.
Driven by useInView
Framer Motion's useInView watches each panel and sets the active image state — no scroll math, no jank.
Scroll-reveal grid
Staggered fade-up as cards enter viewport.
Fade up
Stagger delay 0.0s
Fast reveal
Stagger delay 0.1s
Smooth ease
Stagger delay 0.2s
Card lift
Stagger delay 0.3s
Layered
Stagger delay 0.4s
Mechanical
Stagger delay 0.5s
Hover effects
Hover each tile to preview.
Hover scale
Tile scales to 1.05 on hover.
Image zoom
Image scales inside fixed frame.
Underline slide
Hover this linkShadow lift
Card lifts and casts a shadow.
CountUp stats band
Numbers count up when in view.
Parallax image
Image translates and scales as you scroll past.
Smooth depth
useScroll + useTransform from framer-motion.
Filter Technology Tour
Sticky right-side panel (45%) with detailed SVG cross-sections crossfading as you scroll the five technology stages.
Looping Media Filter Cycle
Dirty fluid enters the top inlet, particles are captured on a fine mesh layer, and clean fluid exits below. A continuous 6-second loop showing the core capture mechanic.
Paper Bed Gravity Filter
Fluid enters the top header and settles on a horizontal paper-media belt. When the float-switch rises, the belt advances left, fresh media feeds from the right spool, and sludge falls into the hopper.
Cylindrical Backwash Filter
Pressurised fluid filters inside-to-outside through a perforated screen. As cake builds, the DP gauge sweeps from green to amber, triggering the rotating arm to clean one arc segment and dump reject through the drain.
KAV Vacuum Filter
Dirty coolant cascades onto a horizontal media belt. Accelerating downward arrows convey vacuum pull as the gauge climbs to 27" Hg. The belt advances right, scraper peels the dry cake, and a pump returns clean fluid.
Magnetic Drum Separator
A rotating drum with N/S poles snaps ferrous particles to its surface. The scraper releases them into the ferrous chute while non-ferrous fluid passes through to the clean-fluid collection.