mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
feat(catalog): group the sidebar by what you came to make (#3194)
* feat(catalog): group the sidebar by what you came to make Nineteen shelves in one column is a list to read, not a menu to scan, and two of them were oversized: Effects held 54 items and Showcases 38, two thirds of which were near-identical code-snippet themes. The shelves now sit under eight openable sections named for what a reader is making, and the editor and terminal themes get a shelf of their own. Every existing shelf name survives underneath, so a bookmark into the catalog still lands where it did. Two things had to change to support nesting. The summary count walks sections as well as shelves, and the filter that preserves hand-written groups now recurses: a section holds groups rather than pages, so a check that only read `pages` found nothing generated in one, kept it as if a human had written it, and appended a fresh copy on every run. * fix(catalog): type the nested page count * fix(catalog): nest shelves inside pages so the sidebar renders them
This commit is contained in:
Miguel Ángel
+455
-410
@@ -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"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user