107 motion patterns. 13 categories.

Header hides on scroll-down, shows on scroll-up. 350ms ease.

components/motion/nav/StickyHeaderHide.tsx

Underline indicator moves smoothly between hovered nav items. 280ms cubic-bezier.

components/motion/nav/NavUnderlineIndicator.tsx

Fixed bottom nav bar for mobile with safe-area-inset support.

components/motion/nav/BottomNavMobile.tsx

Full-screen menu flies in with rotate+scale transform. ESC + backdrop close.

components/motion/nav/MegaMenuOverlay.tsx

Drawer slides in from L/R with backdrop. body scroll lock, ESC close.

components/motion/nav/SideDrawerNav.tsx

Fixed bottom-right CTA, hidden near top, expand-on-hover label.

components/motion/nav/FloatingActionButton.tsx

Breadcrumb items stagger-fade left-to-right with arrow separators.

components/motion/nav/BreadcrumbReveal.tsx

Single underline indicator that slides + resizes to active/hovered nav item position and width.

components/motion/nav/NavUnderlineSlide.tsx

CSS columns masonry layout + IntersectionObserver staggered fade-up of each item.

components/motion/layout/MasonryAnimateIn.tsx

Fixed-column grid wrapper with stagger fade-up per cell on viewport enter.

components/motion/layout/StaggerGrid.tsx

5-cell Apple Bento style asymmetric grid (1 big + 2 mid + 2 small).

components/motion/layout/BentoBoxGrid.tsx

Seamless horizontal infinite marquee for logo wall / trust strip. Pause-on-hover.

components/motion/layout/MarqueeRow.tsx

Side panel sticky while main scrolls. Stacked on mobile. panelSide L/R configurable.

components/motion/layout/StickyPanelReveal.tsx

CSS trick to break out of constrained parent to 100vw. For hero/announcement banners.

components/motion/layout/FullBleedBanner.tsx

Sidebar opens and pushes main content sideways. Layout-aware (not overlay).

components/motion/layout/SidebarPush.tsx

Card collection switches between grid (N cols) and list (1 col); items morph smoothly via CSS Grid transition.

components/motion/layout/GridToListMorph.tsx

5-image cross-fade slideshow with configurable interval/fade duration. Standalone version of HeroV2 builtin.

components/motion/hero/CrossfadeSlideshow.tsx

6-9 photos in unequal-span grid with staggered scale+fade reveal.

components/motion/hero/MosaicGridHero.tsx

Infinite horizontal scroll bar below Hero (hours, rating, etc.). Items joined by separator.

components/motion/hero/MarqueeHeroUnderline.tsx

8-15s autoplay muted loop video. poster fallback. reduced-motion safe.

components/motion/hero/VideoHeroLoop.tsx

50/50 image+text split. imageSide left/right configurable. Mobile stacks.

components/motion/hero/SplitScreenHero.tsx

Single image slow zoom+pan over 15s. Direction in/out, origin configurable.

components/motion/hero/KenBurnsZoom.tsx

Photos drop one by one from top with random rotation and bounce easing.

components/motion/hero/SequentialPhotoDrop.tsx

Image reveals via diagonal clip-path wipe from chosen corner. 1.4s sharp easing.

components/motion/hero/DiagonalWipeEntry.tsx

3-layer parallax (bg/mid/fg) responding to mouse. Mix-blend modes for depth.

components/motion/hero/ParallaxLayerHero.tsx

Massive multi-line typography revealed top-down with clip-path inset + 1-word-per-step stagger.

components/motion/hero/HeroBigTypeReveal.tsx

Live countdown to next batch time. Switches to 'Just baked!' at zero. L3 widget.

components/motion/wow/BakeryCountdown.tsx

Mock live wait minutes + chair availability indicators. L3 widget.

components/motion/wow/BarberWaitTimer.tsx

Parses Hours; shows open/closed status + 'closes in Nm' / 'opens in Nm' / mock queue.

components/motion/wow/CafeLiveStatus.tsx

Auto-rotates through seasonal occasions (Mother's Day / Anniversary / Spring). Hover-pause.

components/motion/wow/FloristOccasionCarousel.tsx

Cursor ring snaps toward elements matching `[data-cursor-magnet]` within radius.

components/motion/cursor/MagneticCursor.tsx

4-6 soft glowing dots trailing cursor with chain smoothing.

components/motion/cursor/CursorTrailGlow.tsx

Full-viewport horizontal + vertical lines following cursor.

components/motion/cursor/CrosshairCursor.tsx

Cursor creates a circular hole through surface layer revealing layer beneath.

components/motion/cursor/CursorMaskReveal.tsx

White circle with mix-blend-mode: difference. Auto-contrasts on any bg. lily-inc direct learning.

components/motion/cursor/CursorColorInversion.tsx

Single brand-accent dot at cursor with 1.6s pulse animation.

components/motion/cursor/CursorBrandPulse.tsx

Center dot + outer ring follow cursor; ring scales 1.6x on link hover. Foundation cursor pattern.

components/motion/cursor/CursorRound.tsx

Reads data-cursor-word attribute on hover targets and shows a pill near the cursor with that word.

components/motion/cursor/CursorWordDisplay.tsx

Background color fades in when section enters viewport. 800ms ease.

components/motion/section/SectionFadeBg.tsx

Diagonal clip-path wipe from chosen corner. 1200ms cubic-bezier.

components/motion/section/SectionDiagonalWipe.tsx

Each section sets body bg to its color when in view. lily-inc 1s transition.

components/motion/section/SectionColorShift.tsx

Sticky section with stagger-reveal inner [data-pin-child] elements.

components/motion/section/SectionPinReveal.tsx

Section slides up from 30vh below + fade. 1100ms cubic-bezier.

components/motion/section/SectionSlideUp.tsx

Outer section fade + inner [data-stagger] items reveal sequentially (120ms apart).

components/motion/section/SectionRevealStagger.tsx

Brand-color curtain drops from top, holds, exits down.

components/motion/section/SectionCurtainDrop.tsx

Section enters with scale(0.85) + blur(8px) + opacity(0.4) → scale(1) + blur(0) + opacity(1) hub-from-distance feel.

components/motion/section/SectionScaleZoom.tsx

3 animated radial-gradient blobs moving in sin/cos. Per-lead 3 colors. Reduced-motion safe.

components/motion/bg/GradientMesh.tsx

SVG feTurbulence inline noise overlaid with mix-blend-mode. 0 external deps.

components/motion/bg/NoiseTexture.tsx

CSS radial-gradient dot grid. lily-inc 完全解析 §6 学び。Optional edge fade with mask-image.

components/motion/bg/DotGrid.tsx

conic-gradient with blur(60px) + slow rotation (30s default). Premium beauty aesthetic.

components/motion/bg/AuroraWave.tsx

Architectural grid lines pattern. Line color / spacing / thickness configurable, fade-edges option.

components/motion/bg/GridLines.tsx

Diagonal stripes via repeating-linear-gradient. 2 colors / angle / width configurable, optional animation.

components/motion/bg/StripesPattern.tsx

Single radial-gradient circle pulses (scale + opacity) on 4s cycle.

components/motion/bg/RadialPulse.tsx

4-color linear gradient that shifts position over 40s. Subtle breathing bg.

components/motion/bg/AnimatedGradient.tsx

Skeleton placeholder with shimmer gradient moving L→R. 1.6s default loop.

components/motion/loader/SkeletonShimmer.tsx

3 dots bouncing in sequence. Inline async indicator. brand-accent default color.

components/motion/loader/SpinningDots.tsx

Determinate (0-100) or indeterminate progress bar. ARIA-compliant.

components/motion/loader/ProgressBarFill.tsx

Circular SVG spinner using currentColor. Button-busy / inline state.

components/motion/loader/InlineLoader.tsx

Large block placeholder with opacity pulse. Supports center content (icon/label).

components/motion/loader/PulsePlaceholder.tsx

Fixed top-of-page slim progress line (YouTube-style). Supports determinate (0-100) or indeterminate.

components/motion/loader/TopLineProgress.tsx

Element slides in from left or right with fade. 100px distance, 800ms easing.

components/motion/scroll/SlideFromSide.tsx

Scale 0.8 → 1.0 with overshoot easing (1.56 spring). Playful bounce.

components/motion/scroll/ScalePopIn.tsx

blur(12px) → blur(0) + opacity 0→1, 1200ms ease-out. Editorial focus-in effect.

components/motion/scroll/BlurSharpen.tsx

clip-path reveal from bottom or top. 1400ms cubic-bezier(0.65, 0, 0.35, 1).

components/motion/scroll/MaskWipeVertical.tsx

Wraps any group: each direct child fades up with staggered IntersectionObserver. Universal baseline.

components/motion/scroll/FadeUpStaggerGroup.tsx

Number counts 0 → target with ease-out cubic when entering viewport. Supports prefix/suffix/decimals.

components/motion/scroll/CounterAnimate.tsx

Rotate from -8deg to 0deg with overshoot spring. Playful entry.

components/motion/scroll/RotateEntry.tsx

clip-path inset(100% 0 0 0) → inset(0) bottom-up wipe reveal with custom easing.

components/motion/scroll/MaskWipeBottomUp.tsx

Splits text into chars and reveals each with 60ms stagger + blur(4px)→0 decay on viewport enter.

components/motion/scroll/LetterByLetterScroll.tsx

Linearly interpolates background color from fromColor to toColor based on element scroll progress.

components/motion/scroll/BgColorShiftOnScroll.tsx

Section is pinned for multi-viewport scroll; stages cross-fade by scroll progress. Scrollytelling foundation.

components/motion/scroll/PinAndRevealStory.tsx

Background image drifts slowly opposite to scroll. Speed factor configurable (-1..1).

components/motion/image/ParallaxImage.tsx

Image is grayscale by default, revealed to color on hover. 600ms filter transition.

components/motion/image/ImageGrayscaleHover.tsx

2-color (shadow + highlight) duotone overlay using mix-blend-mode. Optional revert on hover.

components/motion/image/ImageDuotone.tsx

Image blurs based on distance from viewport center. Max blur ~8px at edges.

components/motion/image/ImageBlurOnScroll.tsx

Horizontal clip-path wipe reveal (left/right configurable). WSMP M4 stand-alone.

components/motion/image/ImageMaskWipeH.tsx

scale 1.15 → 1.0 + opacity 0 → 1 on viewport enter. Cinematic camera-pull-back feel.

components/motion/image/ImageZoomOutEntry.tsx

Pulsing dots on image; hover shows tooltip with label/description. For product / treatment / menu highlights.

components/motion/image/ImageHotspot.tsx

Draggable divider compares 2 images. Keyboard accessible (arrow keys), touch + mouse support.

components/motion/image/BeforeAfterSlider.tsx

Image rotates from rotateY(-25deg) translateX(-30px) to 0 with perspective(1200px). 'Lifts off the page'.

components/motion/image/ImageReveal3D.tsx

Mouse-tracked tilt + radial shine reflection. Image responds to cursor as if physical.

components/motion/image/ImageParallaxTilt.tsx

Each character fades up sequentially when in viewport. Stagger 40ms/char, duration 600ms.

components/motion/text/LetterByLetterReveal.tsx

Character-by-character typewriter reveal with blinking caret. 50ms/char default.

components/motion/text/TypewriterText.tsx

Red/cyan chromatic aberration glitch. Idle pulse every 4-8s. Hover-triggered too.

components/motion/text/GlitchText.tsx

Random chars decode to actual text. IntersectionObserver triggers. Optional re-scramble on hover.

components/motion/text/ScrambleText.tsx

background-clip: text で text に gradient + animated position 8s loop.

components/motion/text/GradientText.tsx

Pulsing text-shadow glow in brand-accent. 2s loop. 80s aesthetic / nightclub vibe.

components/motion/text/NeonGlowText.tsx

Auto-cycle through array of words with fade+translate transition. 'For your [coffee/dental/...] business'.

components/motion/text/RotatingWords.tsx

Text slides up from below overflow-hidden mask on viewport enter. lily-inc H2 simple version.

components/motion/text/TextRevealMask.tsx

Letters bob in sine wave from left to right. Hover doubles amplitude (default 3px).

components/motion/text/WaveText.tsx

Number animates from 0 → target on viewport enter with easeOutCubic. prefix/suffix/decimals/format props.

components/motion/typography/CounterMorph.tsx

Background image scales 1.0 → 1.06 on hover. 700ms easing.

components/motion/hover/ImageZoomHover.tsx

React version of WSMP M6. Underline grows L→R on hover. Color from --brand-accent.

components/motion/hover/UnderlineGrow.tsx

Card tilts in 3D toward cursor (max ±8deg). Eased return. Do NOT combine with FlipCard.

components/motion/hover/CardTilt3D.tsx

Button drifts toward cursor while hovering (±6px). Spring return on leave.

components/motion/hover/MagneticButton.tsx

Popup tooltip-style card appears near trigger on hover. 4 positions (above/below/left/right).

components/motion/hover/InfoCardOnHover.tsx

Material-style click ripple from click point. 700ms expand + fade.

components/motion/hover/RippleOnClick.tsx

Double-layer box-shadow glow with brand-accent on hover + slight lift.

components/motion/hover/GlowOnHover.tsx

Hovered text/link shows associated photo near cursor with fade-in.

components/motion/hover/HoverPhotoReveal.tsx

Card tilts on cursor; inner [data-depth] children parallax-translate by depth value. Awwwards-style.

components/motion/hover/Tilt3DCard.tsx

Hover slides current text up + new text up from bottom. Optional underline expand.

components/motion/hover/TextLineSwap.tsx

Classic ↑↑↓↓←→←→BA triggers brand flash + toast + click burst. Once per session.

components/motion/playful/KonamiEasterEgg.tsx

Cursor turns into a category-appropriate SVG icon (coffee cup / scissors / flower) on hover over key sections.

components/motion/playful/CursorShapeMorph.tsx

Elements with data-logo-magnet gently follow cursor when within 200px radius. Eased return.

components/motion/playful/LogoMagnetism.tsx

Every 30-60s a random text/element does a brief 'wink' (scale 1→1.1→1). Spontaneous joy.

components/motion/playful/IdleWink.tsx

Anywhere user clicks, a small burst of brand-colored particles emerges from the click point and fades.

components/motion/playful/ClickBurst.tsx

Elements with data-scroll-tilt rotate subtly (max 3deg) based on scroll velocity. Decays to 0 when stopped.

components/motion/playful/ScrollSpeedTilt.tsx