diff --git a/docs/docs.json b/docs/docs.json index 49c6c03c7..f5380e052 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -250,446 +250,491 @@ ] }, { - "group": "Code Animations", + "group": "Text & captions", "pages": [ - "catalog/blocks/code-3d-extrude", - "catalog/blocks/code-diff", - "catalog/blocks/code-highlight", - "catalog/blocks/code-morph", - "catalog/blocks/code-particle-assemble", - "catalog/blocks/code-scroll", - "catalog/blocks/code-shader-dissolve", - "catalog/blocks/code-snippet-flight", - "catalog/blocks/code-typing", - "catalog/components/terminal-simulator" + { + "group": "Captions", + "pages": [ + "catalog/components/caption-camera-follow", + "catalog/components/caption-clip-wipe", + "catalog/components/caption-editorial-emphasis", + "catalog/components/caption-emoji-pop", + "catalog/components/caption-glitch-rgb", + "catalog/components/caption-gradient-fill", + "catalog/components/caption-highlight", + "catalog/components/caption-kinetic-slam", + "catalog/components/caption-matrix-decode", + "catalog/components/caption-neon-accent", + "catalog/components/caption-neon-glow", + "catalog/components/caption-parallax-layers", + "catalog/components/caption-particle-burst", + "catalog/components/caption-pill-karaoke", + "catalog/components/caption-texture", + "catalog/components/caption-weight-shift", + "catalog/blocks/mk-callout-highlight" + ] + }, + { + "group": "Typography & Text", + "pages": [ + "catalog/components/blur-out-up", + "catalog/components/bottom-up-letters", + "catalog/components/caption-blend-difference", + "catalog/components/char-slam-explode", + "catalog/components/focus-blur-resolve", + "catalog/components/headline-slam", + "catalog/blocks/hw-path-text", + "catalog/blocks/hw-title", + "catalog/components/inline-highlight", + "catalog/components/kinetic-type-swap", + "catalog/components/line-by-line-slide", + "catalog/components/line-swap", + "catalog/components/logo-brand-close", + "catalog/components/marker-highlight", + "catalog/components/matrix-decode", + "catalog/components/mk-emphasis-type", + "catalog/components/morph-text", + "catalog/components/particle-text-dissolve", + "catalog/components/per-word-crossfade", + "catalog/components/per-word-rise", + "catalog/components/perspective-marquee", + "catalog/components/rgb-glitch-text", + "catalog/components/scan-band", + "catalog/components/scramble-reveal", + "catalog/components/shared-axis-y", + "catalog/components/shared-axis-z", + "catalog/components/shimmer-sweep", + "catalog/components/soft-blur-in", + "catalog/blocks/split-flap-board", + "catalog/components/strikethrough-replace", + "catalog/components/text-shimmer", + "catalog/components/ticker-takeover", + "catalog/components/titlecard-calm", + "catalog/components/titlecard-lockup", + "catalog/components/tracking-in", + "catalog/components/variable-axis-type", + "catalog/components/vox-annotate", + "catalog/blocks/weight-wave", + "catalog/components/wordmark-tiles", + "catalog/blocks/yt-prism-title" + ] + }, + { + "group": "Lower Thirds", + "pages": [ + "catalog/blocks/lower-third-bild", + "catalog/blocks/lt-accent-underline", + "catalog/blocks/lt-bold-block", + "catalog/blocks/lt-clean-bar", + "catalog/blocks/lt-color-block", + "catalog/blocks/lt-dark-card", + "catalog/blocks/lt-kicker-name", + "catalog/blocks/lt-mask-reveal", + "catalog/blocks/lt-side-rule", + "catalog/blocks/lt-soft-pill", + "catalog/blocks/lt-stack-bars", + "catalog/blocks/news-ticker" + ] + } ] }, { - "group": "Captions", + "group": "Code", "pages": [ - "catalog/components/caption-camera-follow", - "catalog/components/caption-clip-wipe", - "catalog/components/caption-editorial-emphasis", - "catalog/components/caption-emoji-pop", - "catalog/components/caption-glitch-rgb", - "catalog/components/caption-gradient-fill", - "catalog/components/caption-highlight", - "catalog/components/caption-kinetic-slam", - "catalog/components/caption-matrix-decode", - "catalog/components/caption-neon-accent", - "catalog/components/caption-neon-glow", - "catalog/components/caption-parallax-layers", - "catalog/components/caption-particle-burst", - "catalog/components/caption-pill-karaoke", - "catalog/components/caption-texture", - "catalog/components/caption-weight-shift", - "catalog/blocks/mk-callout-highlight" + { + "group": "Code Animations", + "pages": [ + "catalog/blocks/code-3d-extrude", + "catalog/blocks/code-diff", + "catalog/blocks/code-highlight", + "catalog/blocks/code-morph", + "catalog/blocks/code-particle-assemble", + "catalog/blocks/code-scroll", + "catalog/blocks/code-shader-dissolve", + "catalog/blocks/code-snippet-flight", + "catalog/blocks/code-typing", + "catalog/components/terminal-simulator" + ] + }, + { + "group": "Code Snippets", + "pages": [ + "catalog/blocks/code-snippet-apple-terminal-basic", + "catalog/blocks/code-snippet-apple-terminal-clear-dark", + "catalog/blocks/code-snippet-apple-terminal-clear-light", + "catalog/blocks/code-snippet-apple-terminal-grass", + "catalog/blocks/code-snippet-apple-terminal-homebrew", + "catalog/blocks/code-snippet-apple-terminal-man-page", + "catalog/blocks/code-snippet-apple-terminal-novel", + "catalog/blocks/code-snippet-apple-terminal-ocean", + "catalog/blocks/code-snippet-apple-terminal-pro", + "catalog/blocks/code-snippet-apple-terminal-red-sands", + "catalog/blocks/code-snippet-apple-terminal-silver-aerogel", + "catalog/blocks/code-snippet-apple-terminal-solid-colors", + "catalog/blocks/code-snippet-dark-2026", + "catalog/blocks/code-snippet-dark-modern", + "catalog/blocks/code-snippet-dark-plus", + "catalog/blocks/code-snippet-high-contrast", + "catalog/blocks/code-snippet-high-contrast-light", + "catalog/blocks/code-snippet-light-2026", + "catalog/blocks/code-snippet-light-modern", + "catalog/blocks/code-snippet-light-plus", + "catalog/blocks/code-snippet-monokai", + "catalog/blocks/code-snippet-solarized-light", + "catalog/blocks/code-snippet-visual-studio-dark", + "catalog/blocks/code-snippet-visual-studio-light" + ] + } ] }, { - "group": "HTML-in-Canvas", + "group": "Transitions", "pages": [ - "catalog/blocks/ios26-liquid-glass", - "catalog/blocks/liquid-glass-context-menu", - "catalog/blocks/liquid-glass-media-controls", - "catalog/blocks/liquid-glass-notification", - "catalog/blocks/liquid-glass-widgets", - "catalog/blocks/macos-tahoe-liquid-glass", - "catalog/blocks/vfx-iphone-device", - "catalog/blocks/vfx-liquid-background", - "catalog/blocks/vfx-liquid-glass", - "catalog/blocks/vfx-magnetic", - "catalog/blocks/vfx-portal", - "catalog/blocks/vfx-shatter", - "catalog/blocks/vfx-text-cursor" + { + "group": "Shader Transitions", + "pages": [ + "catalog/blocks/chromatic-radial-split", + "catalog/blocks/cinematic-zoom", + "catalog/blocks/cross-warp-morph", + "catalog/blocks/domain-warp-dissolve", + "catalog/blocks/flash-through-white", + "catalog/blocks/glitch", + "catalog/blocks/gravitational-lens", + "catalog/blocks/light-leak", + "catalog/blocks/ridged-burn", + "catalog/blocks/ripple-waves", + "catalog/blocks/sdf-iris", + "catalog/blocks/swirl-vortex", + "catalog/blocks/thermal-distortion", + "catalog/blocks/whip-pan" + ] + }, + { + "group": "CSS Transitions", + "pages": [ + "catalog/blocks/beat-freeze-cut", + "catalog/blocks/hw-scribble-transition", + "catalog/blocks/mk-clone-wall-transition", + "catalog/blocks/organic-light-leak-overlay", + "catalog/blocks/transitions-3d", + "catalog/blocks/transitions-blur", + "catalog/blocks/transitions-cover", + "catalog/blocks/transitions-destruction", + "catalog/blocks/transitions-dissolve", + "catalog/blocks/transitions-distortion", + "catalog/blocks/transitions-grid", + "catalog/blocks/transitions-light", + "catalog/blocks/transitions-mechanical", + "catalog/blocks/transitions-other", + "catalog/blocks/transitions-push", + "catalog/blocks/transitions-radial", + "catalog/blocks/transitions-scale" + ] + } ] }, { - "group": "Social Overlays", + "group": "Data & charts", "pages": [ - "catalog/blocks/editorial-flash-overlay", - "catalog/blocks/freeze-frame-dressing", - "catalog/blocks/instagram-follow", - "catalog/blocks/macos-notification", - "catalog/blocks/reddit-post", - "catalog/blocks/spotify-card", - "catalog/blocks/thread-message-stack", - "catalog/blocks/tiktok-follow", - "catalog/blocks/x-post", - "catalog/blocks/yt-comment-card", - "catalog/blocks/yt-lower-third" + { + "group": "Data", + "pages": [ + "catalog/components/animated-bar-chart", + "catalog/components/ascii-render-pass", + "catalog/components/ascii-trail-reveal", + "catalog/blocks/bar-chart-race", + "catalog/components/chart-story", + "catalog/components/conic-progress-ring", + "catalog/blocks/data-chart", + "catalog/components/decline-chart", + "catalog/components/logo-wall", + "catalog/blocks/mk-line-graph", + "catalog/blocks/spain-map", + "catalog/components/star-rating-fill", + "catalog/blocks/us-map", + "catalog/blocks/us-map-bubble", + "catalog/blocks/us-map-flow", + "catalog/blocks/us-map-hex", + "catalog/blocks/world-map" + ] + } ] }, { - "group": "Lower Thirds", + "group": "Scenes & demos", "pages": [ - "catalog/blocks/lower-third-bild", - "catalog/blocks/lt-accent-underline", - "catalog/blocks/lt-bold-block", - "catalog/blocks/lt-clean-bar", - "catalog/blocks/lt-color-block", - "catalog/blocks/lt-dark-card", - "catalog/blocks/lt-kicker-name", - "catalog/blocks/lt-mask-reveal", - "catalog/blocks/lt-side-rule", - "catalog/blocks/lt-soft-pill", - "catalog/blocks/lt-stack-bars", - "catalog/blocks/news-ticker" + { + "group": "Showcases", + "pages": [ + "catalog/components/ai-generation-canvas", + "catalog/blocks/app-showcase", + "catalog/blocks/apple-money-count", + "catalog/blocks/blue-sweater-intro-video", + "catalog/blocks/camera-dolly-zoom", + "catalog/blocks/cosmic-orb", + "catalog/blocks/gallery-tunnel", + "catalog/blocks/north-korea-locked-down", + "catalog/blocks/nyc-paris-flight", + "catalog/blocks/oscilloscope-trace", + "catalog/blocks/rack-focus", + "catalog/blocks/ui-3d-reveal", + "catalog/blocks/vfx-anamorphic-flare", + "catalog/blocks/vpn-youtube-spot" + ] + }, + { + "group": "Product Demo", + "pages": [ + "catalog/components/browser-device-stage", + "catalog/components/code-terminal-run", + "catalog/components/cursor-glyph-trail", + "catalog/components/echo-trail", + "catalog/components/focus-swap", + "catalog/components/icon-morph-beat", + "catalog/components/native-notification-pop", + "catalog/components/notification-stack", + "catalog/components/offset-path-traveler", + "catalog/components/press-ripple", + "catalog/components/pull-to-refresh", + "catalog/components/screen-flow-carousel", + "catalog/components/segmentation-flood", + "catalog/components/soft-blob-touch", + "catalog/components/spring-stack-shuffle", + "catalog/components/state-chip-rail", + "catalog/components/sticky-mock-swap", + "catalog/components/telemetry-hud", + "catalog/components/toggle-flip", + "catalog/components/tracing-beam", + "catalog/components/typed-prompt", + "catalog/components/vector-editor-rig" + ] + }, + { + "group": "Social Overlays", + "pages": [ + "catalog/blocks/editorial-flash-overlay", + "catalog/blocks/freeze-frame-dressing", + "catalog/blocks/instagram-follow", + "catalog/blocks/macos-notification", + "catalog/blocks/reddit-post", + "catalog/blocks/spotify-card", + "catalog/blocks/thread-message-stack", + "catalog/blocks/tiktok-follow", + "catalog/blocks/x-post", + "catalog/blocks/yt-comment-card", + "catalog/blocks/yt-lower-third" + ] + }, + { + "group": "Motion Scenes", + "pages": [ + "catalog/components/aurora-drift", + "catalog/components/beat-accent", + "catalog/components/beat-pulse-background", + "catalog/components/constellation-hub", + "catalog/components/count-up", + "catalog/components/cta-close", + "catalog/components/cta-lockup", + "catalog/components/facet-morph", + "catalog/components/gesture-tap", + "catalog/components/gloss-sweep", + "catalog/components/grade-split-reveal", + "catalog/components/grid-card-assemble", + "catalog/components/light-sweep-pass", + "catalog/components/locked-nucleus-orbit", + "catalog/components/logo-sting", + "catalog/components/modal-morph", + "catalog/components/multi-device-splay", + "catalog/components/outline-draw", + "catalog/components/oversized-cursor", + "catalog/components/particle-image-reveal", + "catalog/components/physical-exit", + "catalog/components/radial-surround", + "catalog/components/scroll-feed", + "catalog/components/slit-scan-reveal", + "catalog/components/split-tilt-cards", + "catalog/components/spring-pop", + "catalog/components/stitched-text-draw", + "catalog/components/stop-motion-cadence", + "catalog/components/svg-stroke-trace", + "catalog/components/swipe-rail", + "catalog/components/testimonial-proof-card", + "catalog/components/touch-indicator", + "catalog/components/trust-strip", + "catalog/components/variable-font-flex", + "catalog/components/velocity-throw-snap", + "catalog/components/whiteboard-ink" + ] + } ] }, { - "group": "Shader Transitions", + "group": "Motion & effects", "pages": [ - "catalog/blocks/chromatic-radial-split", - "catalog/blocks/cinematic-zoom", - "catalog/blocks/cross-warp-morph", - "catalog/blocks/domain-warp-dissolve", - "catalog/blocks/flash-through-white", - "catalog/blocks/glitch", - "catalog/blocks/gravitational-lens", - "catalog/blocks/light-leak", - "catalog/blocks/ridged-burn", - "catalog/blocks/ripple-waves", - "catalog/blocks/sdf-iris", - "catalog/blocks/swirl-vortex", - "catalog/blocks/thermal-distortion", - "catalog/blocks/whip-pan" + { + "group": "Motion Primitives", + "pages": [ + "catalog/components/arc-motion-path", + "catalog/components/avatar-group-hover", + "catalog/components/badge-pop", + "catalog/components/blur-in", + "catalog/components/card-resize", + "catalog/components/chromatic-aberration-wipe", + "catalog/components/dynamic-grid", + "catalog/components/icon-swap", + "catalog/blocks/lt-neon-border", + "catalog/components/menu-morph", + "catalog/components/number-pop-in", + "catalog/components/number-wheel", + "catalog/components/page-slide", + "catalog/components/separator", + "catalog/components/simulated-cursor", + "catalog/components/skeleton-reveal", + "catalog/components/slot-machine-roll", + "catalog/components/staggered-fade-up", + "catalog/components/success-check", + "catalog/components/svg-line-draw-loader", + "catalog/components/text-stagger", + "catalog/components/text-state-swap", + "catalog/components/three-orbiting-cards", + "catalog/components/tilt-card", + "catalog/components/top-down-letters", + "catalog/components/typewriter" + ] + }, + { + "group": "Effects", + "pages": [ + "catalog/components/ai-prompt-flow", + "catalog/components/avatar-cloud", + "catalog/components/beat-timeline", + "catalog/components/before-after-wipe", + "catalog/components/camera-rig-depth-stack", + "catalog/components/checkout-flow", + "catalog/components/comparison-split", + "catalog/components/confetti", + "catalog/components/cut-the-curve", + "catalog/components/device-frame-stage", + "catalog/components/directional-wipe", + "catalog/components/fade-through", + "catalog/components/grid-pixelate-wipe", + "catalog/components/halftone-dissolve", + "catalog/components/hw-arrow", + "catalog/components/hw-boil", + "catalog/components/hw-box-label", + "catalog/components/hw-callout-circle", + "catalog/components/hw-underline", + "catalog/components/input-feedback", + "catalog/components/iris-reveal", + "catalog/components/keyframe-scrub-stack", + "catalog/components/match-cut", + "catalog/components/mesh-gradient-bg", + "catalog/components/micro-transitions", + "catalog/components/mk-usage-arc", + "catalog/components/morph-swap", + "catalog/components/motion-blur", + "catalog/components/multiplayer-cursors", + "catalog/components/notification-pileup", + "catalog/components/onboarding-stepper-flow", + "catalog/components/ordered-dither-pass", + "catalog/components/overwhelm-surround", + "catalog/components/panel-reveal", + "catalog/components/parallax-device-dive", + "catalog/components/parallax-unzoom", + "catalog/components/parallax-zoom", + "catalog/components/rubber-band-bumper", + "catalog/components/settings-toggle-flow", + "catalog/components/signup-flow", + "catalog/components/spotlight-card", + "catalog/components/stagger-cascade", + "catalog/components/stagger-lattice", + "catalog/components/store-badge-lockup", + "catalog/components/svg-mask-reveal", + "catalog/components/tabs-slide-indicator", + "catalog/components/testimonial-card", + "catalog/components/type-match-cut", + "catalog/components/vignette", + "catalog/components/whip-pan-cut", + "catalog/components/x-follow-card", + "catalog/components/yt-circle-pointer", + "catalog/components/yt-feather-highlight", + "catalog/components/zoom-through-transition" + ] + }, + { + "group": "Camera & 3D", + "pages": [ + "catalog/blocks/camcorder-hud", + "catalog/components/camera-scan-gate", + "catalog/components/camera-shake", + "catalog/components/drift-hold", + "catalog/components/focus-rack", + "catalog/components/pan-stations", + "catalog/components/pull-back-reveal", + "catalog/components/push-in", + "catalog/components/scroll-camera-story", + "catalog/components/ui-focus-zoom", + "catalog/components/yt-camera-move" + ] + } ] }, { - "group": "CSS Transitions", + "group": "Surfaces", "pages": [ - "catalog/blocks/beat-freeze-cut", - "catalog/blocks/hw-scribble-transition", - "catalog/blocks/mk-clone-wall-transition", - "catalog/blocks/organic-light-leak-overlay", - "catalog/blocks/transitions-3d", - "catalog/blocks/transitions-blur", - "catalog/blocks/transitions-cover", - "catalog/blocks/transitions-destruction", - "catalog/blocks/transitions-dissolve", - "catalog/blocks/transitions-distortion", - "catalog/blocks/transitions-grid", - "catalog/blocks/transitions-light", - "catalog/blocks/transitions-mechanical", - "catalog/blocks/transitions-other", - "catalog/blocks/transitions-push", - "catalog/blocks/transitions-radial", - "catalog/blocks/transitions-scale" - ] - }, - { - "group": "Showcases", - "pages": [ - "catalog/components/ai-generation-canvas", - "catalog/blocks/app-showcase", - "catalog/blocks/apple-money-count", - "catalog/blocks/blue-sweater-intro-video", - "catalog/blocks/camera-dolly-zoom", - "catalog/blocks/code-snippet-apple-terminal-basic", - "catalog/blocks/code-snippet-apple-terminal-clear-dark", - "catalog/blocks/code-snippet-apple-terminal-clear-light", - "catalog/blocks/code-snippet-apple-terminal-grass", - "catalog/blocks/code-snippet-apple-terminal-homebrew", - "catalog/blocks/code-snippet-apple-terminal-man-page", - "catalog/blocks/code-snippet-apple-terminal-novel", - "catalog/blocks/code-snippet-apple-terminal-ocean", - "catalog/blocks/code-snippet-apple-terminal-pro", - "catalog/blocks/code-snippet-apple-terminal-red-sands", - "catalog/blocks/code-snippet-apple-terminal-silver-aerogel", - "catalog/blocks/code-snippet-apple-terminal-solid-colors", - "catalog/blocks/code-snippet-dark-2026", - "catalog/blocks/code-snippet-dark-modern", - "catalog/blocks/code-snippet-dark-plus", - "catalog/blocks/code-snippet-high-contrast", - "catalog/blocks/code-snippet-high-contrast-light", - "catalog/blocks/code-snippet-light-2026", - "catalog/blocks/code-snippet-light-modern", - "catalog/blocks/code-snippet-light-plus", - "catalog/blocks/code-snippet-monokai", - "catalog/blocks/code-snippet-solarized-light", - "catalog/blocks/code-snippet-visual-studio-dark", - "catalog/blocks/code-snippet-visual-studio-light", - "catalog/blocks/cosmic-orb", - "catalog/blocks/gallery-tunnel", - "catalog/blocks/north-korea-locked-down", - "catalog/blocks/nyc-paris-flight", - "catalog/blocks/oscilloscope-trace", - "catalog/blocks/rack-focus", - "catalog/blocks/ui-3d-reveal", - "catalog/blocks/vfx-anamorphic-flare", - "catalog/blocks/vpn-youtube-spot" - ] - }, - { - "group": "Data", - "pages": [ - "catalog/components/animated-bar-chart", - "catalog/components/ascii-render-pass", - "catalog/components/ascii-trail-reveal", - "catalog/blocks/bar-chart-race", - "catalog/components/chart-story", - "catalog/components/conic-progress-ring", - "catalog/blocks/data-chart", - "catalog/components/decline-chart", - "catalog/components/logo-wall", - "catalog/blocks/mk-line-graph", - "catalog/blocks/spain-map", - "catalog/components/star-rating-fill", - "catalog/blocks/us-map", - "catalog/blocks/us-map-bubble", - "catalog/blocks/us-map-flow", - "catalog/blocks/us-map-hex", - "catalog/blocks/world-map" - ] - }, - { - "group": "Motion Primitives", - "pages": [ - "catalog/components/arc-motion-path", - "catalog/components/avatar-group-hover", - "catalog/components/badge-pop", - "catalog/components/blur-in", - "catalog/components/card-resize", - "catalog/components/chromatic-aberration-wipe", - "catalog/components/dynamic-grid", - "catalog/components/icon-swap", - "catalog/blocks/lt-neon-border", - "catalog/components/menu-morph", - "catalog/components/number-pop-in", - "catalog/components/number-wheel", - "catalog/components/page-slide", - "catalog/components/separator", - "catalog/components/simulated-cursor", - "catalog/components/skeleton-reveal", - "catalog/components/slot-machine-roll", - "catalog/components/staggered-fade-up", - "catalog/components/success-check", - "catalog/components/svg-line-draw-loader", - "catalog/components/text-stagger", - "catalog/components/text-state-swap", - "catalog/components/three-orbiting-cards", - "catalog/components/tilt-card", - "catalog/components/top-down-letters", - "catalog/components/typewriter" - ] - }, - { - "group": "Typography & Text", - "pages": [ - "catalog/components/blur-out-up", - "catalog/components/bottom-up-letters", - "catalog/components/caption-blend-difference", - "catalog/components/char-slam-explode", - "catalog/components/focus-blur-resolve", - "catalog/components/headline-slam", - "catalog/blocks/hw-path-text", - "catalog/blocks/hw-title", - "catalog/components/inline-highlight", - "catalog/components/kinetic-type-swap", - "catalog/components/line-by-line-slide", - "catalog/components/line-swap", - "catalog/components/logo-brand-close", - "catalog/components/marker-highlight", - "catalog/components/matrix-decode", - "catalog/components/mk-emphasis-type", - "catalog/components/morph-text", - "catalog/components/particle-text-dissolve", - "catalog/components/per-word-crossfade", - "catalog/components/per-word-rise", - "catalog/components/perspective-marquee", - "catalog/components/rgb-glitch-text", - "catalog/components/scan-band", - "catalog/components/scramble-reveal", - "catalog/components/shared-axis-y", - "catalog/components/shared-axis-z", - "catalog/components/shimmer-sweep", - "catalog/components/soft-blur-in", - "catalog/blocks/split-flap-board", - "catalog/components/strikethrough-replace", - "catalog/components/text-shimmer", - "catalog/components/ticker-takeover", - "catalog/components/titlecard-calm", - "catalog/components/titlecard-lockup", - "catalog/components/tracking-in", - "catalog/components/variable-axis-type", - "catalog/components/vox-annotate", - "catalog/blocks/weight-wave", - "catalog/components/wordmark-tiles", - "catalog/blocks/yt-prism-title" - ] - }, - { - "group": "Motion Scenes", - "pages": [ - "catalog/components/aurora-drift", - "catalog/components/beat-accent", - "catalog/components/beat-pulse-background", - "catalog/components/constellation-hub", - "catalog/components/count-up", - "catalog/components/cta-close", - "catalog/components/cta-lockup", - "catalog/components/facet-morph", - "catalog/components/gesture-tap", - "catalog/components/gloss-sweep", - "catalog/components/grade-split-reveal", - "catalog/components/grid-card-assemble", - "catalog/components/light-sweep-pass", - "catalog/components/locked-nucleus-orbit", - "catalog/components/logo-sting", - "catalog/components/modal-morph", - "catalog/components/multi-device-splay", - "catalog/components/outline-draw", - "catalog/components/oversized-cursor", - "catalog/components/particle-image-reveal", - "catalog/components/physical-exit", - "catalog/components/radial-surround", - "catalog/components/scroll-feed", - "catalog/components/slit-scan-reveal", - "catalog/components/split-tilt-cards", - "catalog/components/spring-pop", - "catalog/components/stitched-text-draw", - "catalog/components/stop-motion-cadence", - "catalog/components/svg-stroke-trace", - "catalog/components/swipe-rail", - "catalog/components/testimonial-proof-card", - "catalog/components/touch-indicator", - "catalog/components/trust-strip", - "catalog/components/variable-font-flex", - "catalog/components/velocity-throw-snap", - "catalog/components/whiteboard-ink" - ] - }, - { - "group": "Camera & 3D", - "pages": [ - "catalog/blocks/camcorder-hud", - "catalog/components/camera-scan-gate", - "catalog/components/camera-shake", - "catalog/components/drift-hold", - "catalog/components/focus-rack", - "catalog/components/pan-stations", - "catalog/components/pull-back-reveal", - "catalog/components/push-in", - "catalog/components/scroll-camera-story", - "catalog/components/ui-focus-zoom", - "catalog/components/yt-camera-move" - ] - }, - { - "group": "Product Demo", - "pages": [ - "catalog/components/browser-device-stage", - "catalog/components/code-terminal-run", - "catalog/components/cursor-glyph-trail", - "catalog/components/echo-trail", - "catalog/components/focus-swap", - "catalog/components/icon-morph-beat", - "catalog/components/native-notification-pop", - "catalog/components/notification-stack", - "catalog/components/offset-path-traveler", - "catalog/components/press-ripple", - "catalog/components/pull-to-refresh", - "catalog/components/screen-flow-carousel", - "catalog/components/segmentation-flood", - "catalog/components/soft-blob-touch", - "catalog/components/spring-stack-shuffle", - "catalog/components/state-chip-rail", - "catalog/components/sticky-mock-swap", - "catalog/components/telemetry-hud", - "catalog/components/toggle-flip", - "catalog/components/tracing-beam", - "catalog/components/typed-prompt", - "catalog/components/vector-editor-rig" - ] - }, - { - "group": "Texture", - "pages": [ - "catalog/components/grain-field", - "catalog/components/grain-overlay", - "catalog/blocks/halftone-field", - "catalog/components/ink-bleed-reveal", - "catalog/components/texture-mask-text", - "catalog/blocks/yt-lcd-background", - "catalog/components/yt-screen-warp" - ] - }, - { - "group": "Effects", - "pages": [ - "catalog/components/ai-prompt-flow", - "catalog/components/avatar-cloud", - "catalog/components/beat-timeline", - "catalog/components/before-after-wipe", - "catalog/components/camera-rig-depth-stack", - "catalog/components/checkout-flow", - "catalog/components/comparison-split", - "catalog/components/confetti", - "catalog/components/cut-the-curve", - "catalog/components/device-frame-stage", - "catalog/components/directional-wipe", - "catalog/components/fade-through", - "catalog/components/grid-pixelate-wipe", - "catalog/components/halftone-dissolve", - "catalog/components/hw-arrow", - "catalog/components/hw-boil", - "catalog/components/hw-box-label", - "catalog/components/hw-callout-circle", - "catalog/components/hw-underline", - "catalog/components/input-feedback", - "catalog/components/iris-reveal", - "catalog/components/keyframe-scrub-stack", - "catalog/components/match-cut", - "catalog/components/mesh-gradient-bg", - "catalog/components/micro-transitions", - "catalog/components/mk-usage-arc", - "catalog/components/morph-swap", - "catalog/components/motion-blur", - "catalog/components/multiplayer-cursors", - "catalog/components/notification-pileup", - "catalog/components/onboarding-stepper-flow", - "catalog/components/ordered-dither-pass", - "catalog/components/overwhelm-surround", - "catalog/components/panel-reveal", - "catalog/components/parallax-device-dive", - "catalog/components/parallax-unzoom", - "catalog/components/parallax-zoom", - "catalog/components/rubber-band-bumper", - "catalog/components/settings-toggle-flow", - "catalog/components/signup-flow", - "catalog/components/spotlight-card", - "catalog/components/stagger-cascade", - "catalog/components/stagger-lattice", - "catalog/components/store-badge-lockup", - "catalog/components/svg-mask-reveal", - "catalog/components/tabs-slide-indicator", - "catalog/components/testimonial-card", - "catalog/components/type-match-cut", - "catalog/components/vignette", - "catalog/components/whip-pan-cut", - "catalog/components/x-follow-card", - "catalog/components/yt-circle-pointer", - "catalog/components/yt-feather-highlight", - "catalog/components/zoom-through-transition" + { + "group": "Texture", + "pages": [ + "catalog/components/grain-field", + "catalog/components/grain-overlay", + "catalog/blocks/halftone-field", + "catalog/components/ink-bleed-reveal", + "catalog/components/texture-mask-text", + "catalog/blocks/yt-lcd-background", + "catalog/components/yt-screen-warp" + ] + }, + { + "group": "HTML-in-Canvas", + "pages": [ + "catalog/blocks/ios26-liquid-glass", + "catalog/blocks/liquid-glass-context-menu", + "catalog/blocks/liquid-glass-media-controls", + "catalog/blocks/liquid-glass-notification", + "catalog/blocks/liquid-glass-widgets", + "catalog/blocks/macos-tahoe-liquid-glass", + "catalog/blocks/vfx-iphone-device", + "catalog/blocks/vfx-liquid-background", + "catalog/blocks/vfx-liquid-glass", + "catalog/blocks/vfx-magnetic", + "catalog/blocks/vfx-portal", + "catalog/blocks/vfx-shatter", + "catalog/blocks/vfx-text-cursor" + ] + } ] }, { "group": "Blocks", "pages": [ - "catalog/blocks/flowchart", - "catalog/blocks/flowchart-vertical", - "catalog/blocks/hw-frame", - "catalog/blocks/hw-pipeline", - "catalog/blocks/hw-text-cloud", - "catalog/blocks/logo-outro", - "catalog/blocks/mk-background", - "catalog/blocks/mk-placeholder-grid", - "catalog/blocks/mk-progress-stat", - "catalog/blocks/mk-specs-list", - "catalog/blocks/spiral-galaxy", - "catalog/blocks/yt-logo-intro", - "catalog/blocks/yt-vertical-fill" + { + "group": "Blocks", + "pages": [ + "catalog/blocks/flowchart", + "catalog/blocks/flowchart-vertical", + "catalog/blocks/hw-frame", + "catalog/blocks/hw-pipeline", + "catalog/blocks/hw-text-cloud", + "catalog/blocks/logo-outro", + "catalog/blocks/mk-background", + "catalog/blocks/mk-placeholder-grid", + "catalog/blocks/mk-progress-stat", + "catalog/blocks/mk-specs-list", + "catalog/blocks/spiral-galaxy", + "catalog/blocks/yt-logo-intro", + "catalog/blocks/yt-vertical-fill" + ] + } ] } ] diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts index 5ef914904..e46e0038b 100644 --- a/scripts/generate-catalog-pages.ts +++ b/scripts/generate-catalog-pages.ts @@ -1107,6 +1107,7 @@ function main(): void { "Shader Transitions": 5, "CSS Transitions": 6, Showcases: 7, + "Code Snippets": 7.5, Data: 8, "Motion Primitives": 9, "Motion Scenes": 11, @@ -1138,6 +1139,10 @@ function main(): void { if (tags.includes("social")) return "Social Overlays"; if (tags.includes("transition")) return entry.type === "component" ? "Effects" : "CSS Transitions"; + // The editor and terminal themes are 24 near-identical pages. Left in + // Showcases they were two thirds of it, and the handful of actual showcase + // scenes were unfindable underneath them. + if (entry.name.startsWith("code-snippet-")) return "Code Snippets"; if (tags.includes("showcase") || tags.includes("3d")) return "Showcases"; if (tags.includes("data") || tags.includes("chart") || tags.includes("ascii")) return "Data"; // Split what used to be one 267-item "Effects" list. Ordered most specific @@ -1175,10 +1180,49 @@ function main(): void { groupMap.get(group)!.push(page); } - const catalogGroups = [...groupMap.entries()] + const flatGroups = [...groupMap.entries()] .sort(([a], [b]) => (GROUP_ORDER[a] ?? 50) - (GROUP_ORDER[b] ?? 50)) .map(([group, pages]) => ({ group, pages })); + // Nineteen shelves in one column is a list to read, not a menu to scan. + // Collapsing them under what a reader came here to make turns it into eight + // openable sections, and keeps every existing shelf name intact underneath. + const SECTIONS: { section: string; groups: string[] }[] = [ + { section: "Text & captions", groups: ["Captions", "Typography & Text", "Lower Thirds"] }, + { section: "Code", groups: ["Code Animations", "Code Snippets"] }, + { section: "Transitions", groups: ["Shader Transitions", "CSS Transitions"] }, + { section: "Data & charts", groups: ["Data"] }, + { + section: "Scenes & demos", + groups: ["Showcases", "Product Demo", "Social Overlays", "Motion Scenes"], + }, + { section: "Motion & effects", groups: ["Motion Primitives", "Effects", "Camera & 3D"] }, + { section: "Surfaces", groups: ["Texture", "HTML-in-Canvas"] }, + { section: "Blocks", groups: ["Blocks"] }, + ]; + + const byName = new Map(flatGroups.map((g) => [g.group, g])); + const placed = new Set(); + const catalogGroups: unknown[] = []; + + for (const { section, groups } of SECTIONS) { + const children = groups + .map((name) => byName.get(name)) + .filter((g): g is { group: string; pages: string[] } => g !== undefined); + if (children.length === 0) continue; + for (const child of children) placed.add(child.group); + // A nested shelf is an entry in the parent's `pages`, beside the page + // strings. A sibling `groups` key parses without complaint and renders + // nothing, which took the whole catalog out of the sidebar. + catalogGroups.push({ group: section, pages: children }); + } + + // A shelf nobody assigned a section still has to appear, or a new tag would + // silently drop its items out of the sidebar. + for (const group of flatGroups) { + if (!placed.has(group.group)) catalogGroups.push(group); + } + if (catalogGroups.length > 0) { const existingIdx = tabs.findIndex((t) => t.tab === "Catalog"); const existing = existingIdx >= 0 ? tabs[existingIdx] : undefined; @@ -1188,8 +1232,17 @@ function main(): void { // catalog landing page from the sidebar entirely. const isGeneratedPage = (p: unknown): boolean => typeof p === "string" && /^catalog\/(blocks|components)\//.test(p); + // Has to recurse: a section holds groups rather than pages, so a check that + // only reads `pages` finds nothing generated in one, keeps it as if a human + // had written it, and appends a fresh copy on every run. + const holdsGeneratedPages = (node: unknown): boolean => { + if (isGeneratedPage(node)) return true; + if (!node || typeof node !== "object") return false; + const g = node as { pages?: unknown[] }; + return (g.pages ?? []).some(holdsGeneratedPages); + }; const handAddedGroups: unknown[] = (existing?.groups ?? []).filter( - (g: { pages?: unknown[] }) => !(g.pages ?? []).some(isGeneratedPage), + (g: unknown) => !holdsGeneratedPages(g), ); const catalogTab = { @@ -1207,8 +1260,17 @@ function main(): void { tabs.splice(docsIdx >= 0 ? docsIdx + 1 : 1, 0, catalogTab); } writeFileSync(docsJsonPath, JSON.stringify(docsJson, null, 2) + "\n", "utf-8"); - const totalPages = catalogGroups.reduce((n, g) => n + g.pages.length, 0); - console.log(` ✓ docs.json updated with ${catalogGroups.length} groups, ${totalPages} pages`); + // A section holds groups, a shelf holds pages; the count has to walk both + // or it reports zero for everything that was nested. + const countPages = (node: unknown): number => { + if (typeof node === "string") return 1; + if (!node || typeof node !== "object") return 0; + const g = node as { pages?: unknown[] }; + if (!Array.isArray(g.pages)) return 0; + return g.pages.reduce((n: number, entry: unknown) => n + countPages(entry), 0); + }; + const totalPages = catalogGroups.reduce((n: number, g) => n + countPages(g), 0); + console.log(` ✓ docs.json updated with ${catalogGroups.length} sections, ${totalPages} pages`); } console.log("\nDone.");