wikis / HyperFrames / wiki / entities / catalog-social-and-ui-blocks.md view as markdown
Catalog Social and UI Blocks
Overview
This entity page groups official catalog docs that are useful together. Use it as a shopping list when designing a scene.
Characteristics
| Block/Component | Raw doc | Use cue |
|---|---|---|
| App Showcase | raw/docs/catalog-blocks__app-showcase.md |
Fitness app product showcase with three floating smartphone screens |
| Apple Money Count | raw/docs/catalog-blocks__apple-money-count.md |
Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound. |
| Blue Sweater Intro Video | raw/docs/catalog-blocks__blue-sweater-intro-video.md |
Warm AI creator intro sequence that resolves into an X follow card for @blue_sweater. |
| Chromatic Radial Split | raw/docs/catalog-blocks__chromatic-radial-split.md |
Shader transition with chromatic aberration radial split |
| Cinematic Zoom | raw/docs/catalog-blocks__cinematic-zoom.md |
Shader transition with dramatic zoom blur |
| Dark 2026 | raw/docs/catalog-blocks__code-snippet-dark-2026.md |
The newest VS Code dark theme with refined token scopes and updated palette. |
| Dark Modern | raw/docs/catalog-blocks__code-snippet-dark-modern.md |
The default dark theme — clean and contemporary with comfortable contrast. |
| Dark+ | raw/docs/catalog-blocks__code-snippet-dark-plus.md |
Classic dark theme with enhanced syntax highlighting for popular languages. |
| High Contrast | raw/docs/catalog-blocks__code-snippet-high-contrast.md |
Maximum contrast dark theme for accessibility. |
| High Contrast Light | raw/docs/catalog-blocks__code-snippet-high-contrast-light.md |
Maximum contrast light theme for accessibility. |
| Light 2026 | raw/docs/catalog-blocks__code-snippet-light-2026.md |
The newest VS Code light theme with refined token scopes and updated palette. |
| Light Modern | raw/docs/catalog-blocks__code-snippet-light-modern.md |
The default light theme — a fresh, modern take on the classic VS light experience. |
| Light+ | raw/docs/catalog-blocks__code-snippet-light-plus.md |
Classic light theme with enhanced syntax highlighting for popular languages. |
| Monokai | raw/docs/catalog-blocks__code-snippet-monokai.md |
The iconic warm-toned dark theme beloved by developers worldwide. |
| Solarized Light | raw/docs/catalog-blocks__code-snippet-solarized-light.md |
Ethan Schoonover's precision-engineered light color scheme. |
| Visual Studio Dark | raw/docs/catalog-blocks__code-snippet-visual-studio-dark.md |
The traditional Visual Studio dark color scheme. |
| Visual Studio Light | raw/docs/catalog-blocks__code-snippet-visual-studio-light.md |
The traditional Visual Studio light color scheme. |
| Cross Warp Morph | raw/docs/catalog-blocks__cross-warp-morph.md |
Shader transition with cross-warped morphing |
| Data Chart | raw/docs/catalog-blocks__data-chart.md |
Animated bar + line chart with staggered reveal, NYT-style typography, and value labels |
| Domain Warp Dissolve | raw/docs/catalog-blocks__domain-warp-dissolve.md |
Shader transition with fractal noise domain warping |
| Flash Through White | raw/docs/catalog-blocks__flash-through-white.md |
Shader transition with white flash crossfade |
| Flowchart | raw/docs/catalog-blocks__flowchart.md |
Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction |
| Glitch | raw/docs/catalog-blocks__glitch.md |
Shader transition with digital glitch artifacts |
| Gravitational Lens | raw/docs/catalog-blocks__gravitational-lens.md |
Shader transition with gravitational lensing distortion |
| Instagram Follow | raw/docs/catalog-blocks__instagram-follow.md |
Animated Instagram follow overlay with profile card and follow button |
| iOS 26 Liquid Glass Home Screen | raw/docs/catalog-blocks__ios26-liquid-glass.md |
3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model. |
| Light Leak | raw/docs/catalog-blocks__light-leak.md |
Shader transition with cinematic light leak overlay |
| Liquid Glass Context Menu | raw/docs/catalog-blocks__liquid-glass-context-menu.md |
Frosted glass context menu panel drifting over an aurora shader background |
| Liquid Glass Media Controls | raw/docs/catalog-blocks__liquid-glass-media-controls.md |
Frosted glass media control panels spreading over an aurora shader background |
| Liquid Glass Notification | raw/docs/catalog-blocks__liquid-glass-notification.md |
Frosted glass notification cards floating over an aurora shader background |
| Liquid Glass Widgets | raw/docs/catalog-blocks__liquid-glass-widgets.md |
Frosted glass stat cards, showcase panel and pill chips over an aurora shader background |
| Logo Outro | raw/docs/catalog-blocks__logo-outro.md |
Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill |
| macOS Notification | raw/docs/catalog-blocks__macos-notification.md |
Animated macOS-style notification banner with app icon and message |
| macOS Tahoe Liquid Glass Desktop | raw/docs/catalog-blocks__macos-tahoe-liquid-glass.md |
3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move. |
| North Korea Locked Down | raw/docs/catalog-blocks__north-korea-locked-down.md |
Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash. |
| NYC Paris Flight | raw/docs/catalog-blocks__nyc-paris-flight.md |
Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects. |
| Reddit Post Card | raw/docs/catalog-blocks__reddit-post.md |
Animated Reddit post card overlay with upvotes and comments |
| Ridged Burn | raw/docs/catalog-blocks__ridged-burn.md |
Shader transition with ridged turbulence burn effect |
| Ripple Waves | raw/docs/catalog-blocks__ripple-waves.md |
Shader transition with concentric ripple wave distortion |
| SDF Iris | raw/docs/catalog-blocks__sdf-iris.md |
Shader transition with signed distance field iris reveal |
| Spain Map | raw/docs/catalog-blocks__spain-map.md |
Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection |
| Spotify Now Playing | raw/docs/catalog-blocks__spotify-card.md |
Animated Spotify now-playing card with album art and progress bar |
| Swirl Vortex | raw/docs/catalog-blocks__swirl-vortex.md |
Shader transition with swirling vortex distortion |
| Thermal Distortion | raw/docs/catalog-blocks__thermal-distortion.md |
Shader transition with heat haze thermal distortion |
| TikTok Follow | raw/docs/catalog-blocks__tiktok-follow.md |
Animated TikTok follow overlay with profile card and follow button |
| 3D Transitions | raw/docs/catalog-blocks__transitions-3d.md |
Showcase of 3D perspective flip and rotate transitions |
| Blur Transitions | raw/docs/catalog-blocks__transitions-blur.md |
Showcase of blur-based transitions between scenes |
| Cover Transitions | raw/docs/catalog-blocks__transitions-cover.md |
Showcase of cover/uncover slide transitions |
| Destruction Transitions | raw/docs/catalog-blocks__transitions-destruction.md |
Showcase of destructive break-apart transitions |
| Dissolve Transitions | raw/docs/catalog-blocks__transitions-dissolve.md |
Showcase of dissolve and fade transitions |
| Distortion Transitions | raw/docs/catalog-blocks__transitions-distortion.md |
Showcase of warp and distortion transitions |
| Grid Transitions | raw/docs/catalog-blocks__transitions-grid.md |
Showcase of grid-based tile transitions |
| Light Transitions | raw/docs/catalog-blocks__transitions-light.md |
Showcase of light-based glow and flash transitions |
| Mechanical Transitions | raw/docs/catalog-blocks__transitions-mechanical.md |
Showcase of mechanical shutter and iris transitions |
| Other Transitions | raw/docs/catalog-blocks__transitions-other.md |
Showcase of miscellaneous creative transitions |
| Push Transitions | raw/docs/catalog-blocks__transitions-push.md |
Showcase of push and slide transitions |
| Radial Transitions | raw/docs/catalog-blocks__transitions-radial.md |
Showcase of radial wipe and reveal transitions |
| Scale Transitions | raw/docs/catalog-blocks__transitions-scale.md |
Showcase of scale and zoom transitions |
| 3D UI Reveal | raw/docs/catalog-blocks__ui-3d-reveal.md |
Perspective 3D reveal animation for UI elements |
| US Map | raw/docs/catalog-blocks__us-map.md |
Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP |
Common Strategies
- Pick one primary block/effect per scene.
- Prefer source-grounded UI and readable captions over decorative effects.
- Validate the composition after adding catalog code.
Related Entities
Sources
raw/docs/docs-index-llms.md- Grouped catalog raw docs listed above.