From 299e7bb1ab679af77d6bf5866196f8d5f2d7af37 Mon Sep 17 00:00:00 2001 From: kapishdima Date: Mon, 2 Nov 2026 15:04:17 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20site=20redesign=20=E2=80=94=20landing,?= =?UTF-8?q?=20docs,=20guides,=20blog,=20showcases,=20sponsors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New visual system across the whole site: capsule header, Butter-style landing with live remocn previews, docs shell with library switcher, tree-only sidebar and Copy page split menu, guide/index/blog/showcase/ legal/changelog/stars pages, plus an animation and UI review pass. Co-Authored-By: Claude Opus 5.5 --- CLAUDE.md | 10 + app/(home)/blog/[slug]/page.tsx | 158 ++- app/(home)/blog/components/beats-list.tsx | 56 + app/(home)/blog/components/blog-header.tsx | 45 + app/(home)/blog/components/featured-post.tsx | 77 ++ app/(home)/blog/components/guide-card.tsx | 35 + app/(home)/blog/components/more-posts.tsx | 35 + app/(home)/blog/components/post-card.tsx | 67 + app/(home)/blog/components/post-index-nav.tsx | 68 + app/(home)/blog/components/post-index.tsx | 95 ++ app/(home)/blog/components/post-meta.tsx | 42 + app/(home)/blog/components/post-poster.tsx | 52 + .../blog/components/screening-player.tsx | 193 +++ app/(home)/blog/lib/post-types.ts | 26 + app/(home)/blog/lib/posts.ts | 65 + app/(home)/blog/page.tsx | 89 +- .../changelog/components/changelog-entry.tsx | 65 + .../changelog/components/changelog-header.tsx | 54 + .../components}/changelog-preview.tsx | 2 +- .../changelog/components/video-feed.tsx | 57 +- app/(home)/changelog/page.tsx | 83 +- app/(home)/changelog/video/page.tsx | 14 +- app/(home)/components/fade-up.tsx | 35 +- app/(home)/components/github-button.tsx | 2 +- app/(home)/components/header-nav.tsx | 45 +- app/(home)/components/hero-badge.tsx | 37 - app/(home)/components/hero-terminal-bg.tsx | 37 - .../landing/header/docs-directory.tsx | 239 ++++ .../landing/header/github-stars-link.tsx | 41 + .../components/landing/header/hover-zone.tsx | 132 ++ .../components/landing/header/landing-nav.tsx | 402 ++++++ .../landing/header/landing-wordmark.tsx | 23 + .../components/landing/header/mobile-menu.tsx | 147 ++ .../components/landing/header/pill-track.tsx | 103 ++ .../landing/header/registry-health-badge.tsx | 13 + .../landing/header/registry-health-card.tsx | 77 ++ .../landing/header/registry-health.tsx | 86 ++ .../landing/header/stretch-pill.tsx | 120 ++ .../landing/scenes/crt-wordmark.tsx | 84 ++ app/(home)/components/landing/scenes/index.ts | 24 + .../components/landing/sections/final-cta.tsx | 66 + .../components/landing/sections/hero.tsx | 46 + .../landing/sections/hero/composer-status.tsx | 31 + .../sections/hero/composer/composer-loop.tsx | 268 ++++ .../sections/hero/composer/picked-chip.tsx | 307 +++++ .../sections/hero/composer/scenarios.ts | 189 +++ .../hero/composer/use-composer-loop.ts | 158 +++ .../landing/sections/hero/floating-scene.tsx | 329 +++++ .../landing/sections/hero/hero-headline.tsx | 49 + .../landing/sections/hero/prompt-composer.tsx | 84 ++ .../landing/sections/hero/prompt-stage.tsx | 26 + .../landing/sections/hero/scenes/clips.tsx | 1215 +++++++++++++++++ .../sections/hero/scenes/composer-signal.ts | 35 + .../landing/sections/hero/scenes/config.ts | 95 ++ .../sections/hero/scenes/dither-sweep.ts | 127 ++ .../sections/hero/scenes/hero-scene-field.tsx | 14 + .../sections/hero/scenes/hero-scenes.json | 285 ++++ .../sections/hero/scenes/live-clips.ts | 113 ++ .../sections/hero/scenes/scenario-scenes.ts | 133 ++ .../sections/hero/scenes/scene-field.tsx | 405 ++++++ .../sections/hero/scenes/sets/effects.tsx | 374 +++++ .../sections/hero/scenes/sets/frames.tsx | 860 ++++++++++++ .../sections/hero/scenes/sets/index.tsx | 41 + .../landing/sections/hero/scenes/sets/kit.tsx | 121 ++ .../sections/hero/scenes/sets/live.tsx | 33 + .../sections/hero/scenes/sets/story.tsx | 1078 +++++++++++++++ .../sections/hero/scenes/sets/types.ts | 17 + .../landing/sections/hero/studio-pill.tsx | 30 + .../landing/sections/hero/tiles/ae-mark.tsx | 15 + .../landing/sections/hero/tiles/ae-tile.tsx | 143 ++ .../landing/sections/hero/tiles/clips.tsx | 158 +++ .../landing/sections/hero/tiles/config.ts | 208 +++ .../sections/hero/tiles/hero-tiles.json | 153 +++ .../sections/hero/tiles/hero-tiles.tsx | 63 + .../sections/hero/tiles/tile-player.tsx | 120 ++ .../sections/hero/tiles/video-tile.tsx | 392 ++++++ .../landing/sections/how-it-works.tsx | 49 + .../sections/how-it-works/agent-session.tsx | 174 +++ .../sections/how-it-works/session-player.tsx | 53 + .../sections/how-it-works/steps-legend.tsx | 34 + .../landing/sections/sponsors-strip.tsx | 93 ++ .../sponsors-strip/sponsor-carousel.tsx | 106 ++ .../sections/sponsors-strip/sponsor-cells.tsx | 61 + .../sections/sponsors-strip/sponsor-logo.tsx | 57 + .../landing/sections/studio-pipeline.tsx | 19 + .../studio-pipeline/pipeline-stages.tsx | 151 ++ .../sections/studio-pipeline/studio-copy.tsx | 54 + .../landing/sections/testimonials-wall.tsx | 28 + .../testimonials-wall/wall-columns.tsx | 64 + .../testimonials-wall/wall-footer.tsx | 23 + .../testimonials-wall/x-post-card.tsx | 114 ++ .../testimonials-wall/x-spotlight.tsx | 89 ++ .../landing/sections/whats-inside.tsx | 97 ++ .../whats-inside/backgrounds-tile.tsx | 44 + .../sections/whats-inside/bento-clip.tsx | 45 + .../sections/whats-inside/bento-clips.ts | 63 + .../landing/sections/whats-inside/bento.json | 1 + .../whats-inside/copy-command-button.tsx | 64 + .../sections/whats-inside/family-tile.tsx | 69 + .../sections/whats-inside/install-strip.tsx | 44 + .../sections/whats-inside/type-remix.tsx | 78 ++ .../sections/whats-inside/typography-tile.tsx | 31 + .../landing/sections/why-remocn.tsx | 44 + .../sections/why-remocn/compare-card.tsx | 75 + .../landing/sections/why-remocn/reasons.tsx | 45 + .../components/landing/ui/brand-icons.tsx | 201 +++ .../components/landing/ui/catalog-card.tsx | 136 ++ .../components/landing/ui/download-button.tsx | 53 + .../components/landing/ui/landing-button.tsx | 78 ++ .../components/landing/ui/live-silk.tsx | 68 + .../components/landing/ui/metal-ring.tsx | 25 + .../components/landing/ui/pause-offscreen.tsx | 28 + .../components/landing/ui/remocn-mark.tsx | 75 + .../components/landing/ui/reveal-scope.tsx | 81 ++ .../landing/ui/roll-player/roll-buttons.tsx | 133 ++ .../landing/ui/roll-player/roll-player.tsx | 482 +++++++ .../landing/ui/roll-player/roll-timeline.tsx | 223 +++ .../components/landing/ui/section-title.tsx | 47 + app/(home)/components/mega-menu.tsx | 4 +- app/(home)/components/section-heading.tsx | 61 - app/(home)/components/sections/faq.tsx | 54 - app/(home)/components/sections/final-cta.tsx | 63 - .../components/sections/hero-scroll-video.tsx | 133 -- app/(home)/components/sections/hero.tsx | 92 -- .../components/sections/how-it-works-viz.tsx | 236 ---- .../components/sections/how-it-works.tsx | 103 -- .../components/sections/landing-partners.tsx | 28 - .../components/sections/shaders-viz.tsx | 47 - .../components/sections/testimonials.tsx | 100 -- .../components/sections/transitions-viz.tsx | 59 - .../components/sections/whats-inside.tsx | 436 ------ app/(home)/components/sections/why-remocn.tsx | 149 -- app/(home)/components/site-footer.tsx | 122 +- app/(home)/components/site-header.tsx | 108 +- .../components/site-page/copy-text-button.tsx | 59 + .../components/site-page/page-header.tsx | 63 + .../components/site-page/play-glyph.tsx | 26 + .../site-page/use-active-section.ts | 36 + .../components/site-page/use-loop-controls.ts | 44 + app/(home)/components/sponsor-card.tsx | 121 -- app/(home)/components/sponsor-grid.tsx | 124 -- app/(home)/components/stars-button.tsx | 2 +- app/(home)/components/sticky-header-shell.tsx | 104 -- app/(home)/components/threads-icon.tsx | 12 - app/(home)/components/use-autoplay.ts | 9 +- app/(home)/components/x-icon.tsx | 12 - app/(home)/legal/components/legal-article.tsx | 101 ++ app/(home)/legal/components/legal-contact.tsx | 31 + .../legal/components/legal-contents-bar.tsx | 123 ++ app/(home)/legal/components/legal-hero.tsx | 54 + app/(home)/legal/components/legal-index.tsx | 76 ++ app/(home)/legal/content.tsx | 197 +++ app/(home)/legal/page.tsx | 172 +-- app/(home)/page.tsx | 30 +- app/(home)/showcases/[slug]/page.tsx | 175 ++- .../showcases/components/reel/clip-list.tsx | 168 +++ .../showcases/components/reel/inspector.tsx | 133 ++ .../showcases/components/reel/monitor.tsx | 44 + .../components/reel/showcase-reel.tsx | 76 ++ .../showcases/components/reel/timeline.tsx | 283 ++++ .../components/reel/use-reel-player.ts | 119 ++ .../showcases/components/showcase-author.tsx | 48 - .../components/showcase-components.tsx | 54 - .../showcases/components/showcase-details.tsx | 74 + .../showcases/components/showcase-grid.tsx | 129 -- .../showcases/components/showcase-video.tsx | 37 +- .../showcases/components/showcases-header.tsx | 63 + .../showcases/components/showcases-hero.tsx | 48 - .../showcases/components/use-hover-capable.ts | 19 - app/(home)/showcases/lib/docs-urls.ts | 40 + app/(home)/showcases/lib/reel-types.ts | 43 + app/(home)/showcases/lib/reel.ts | 89 ++ app/(home)/showcases/page.tsx | 37 +- app/(home)/sponsors/components/credits.tsx | 30 + .../components/credits/credit-entry.tsx | 81 ++ .../components/credits/credit-groups.ts | 95 ++ .../components/credits/credits-roll.tsx | 59 + app/(home)/sponsors/components/hero.tsx | 29 + .../sponsors/components/hero/hero-actions.tsx | 31 + .../components/hero/openpanel-mark.tsx | 20 + .../sponsors/components/sections/hero.tsx | 108 -- .../sponsors/components/sections/tiers.tsx | 160 --- .../components/sections/wall-of-love.tsx | 77 -- app/(home)/sponsors/components/tiers.tsx | 21 + .../sponsors/components/tiers/tier-button.tsx | 45 + .../sponsors/components/tiers/tier-card.tsx | 106 ++ app/(home)/sponsors/components/traffic.tsx | 57 + .../sponsors/components/traffic/bar-list.tsx | 50 + .../sponsors/components/traffic/card.tsx | 24 + .../sponsors/components/traffic/curve.ts | 39 + .../components/traffic/devices-card.tsx | 127 ++ .../sponsors/components/traffic/format.ts | 56 + .../components/traffic/stats-column.tsx | 94 ++ .../components/traffic/visitors-card.tsx | 60 + .../components/traffic/visitors-chart.tsx | 148 ++ app/(home)/sponsors/page.tsx | 23 +- .../stargazers-deprecated-notice.tsx | 80 -- app/(home)/stars/page.tsx | 61 +- app/api/lab/docs-layout/route.ts | 16 + app/api/lab/header-layout/route.ts | 16 + app/api/lab/hero-scenes/route.ts | 26 + app/api/lab/hero-tiles/route.ts | 26 + app/api/lab/whats-inside/route.ts | 25 + app/docs/[[...slug]]/page.tsx | 58 +- app/docs/layout.tsx | 98 +- app/fonts/PaperMono-OFL.txt | 93 ++ app/fonts/PaperMono-Variable.woff2 | Bin 0 -> 53344 bytes app/globals.css | 1088 +++++++++++++-- app/lab/_components/clip-editor.tsx | 343 +++++ app/lab/docs-layout/docs-layout-lab.tsx | 332 +++++ app/lab/docs-layout/page.tsx | 11 + app/lab/header-layout/header-layout-lab.tsx | 314 +++++ app/lab/header-layout/page.tsx | 11 + app/lab/hero-scenes/hero-scenes-lab.tsx | 391 ++++++ app/lab/hero-scenes/page.tsx | 11 + app/lab/hero-tiles/hero-tiles-lab.tsx | 411 ++++++ app/lab/hero-tiles/page.tsx | 11 + app/lab/whats-inside/bento-lab.tsx | 193 +++ app/lab/whats-inside/page.tsx | 16 + app/layout.tsx | 33 +- app/not-found-video.tsx | 13 +- app/not-found.tsx | 77 +- app/typeset.css | 183 ++- bun.lock | 3 + components/Silk.tsx | 762 +++++++++++ components/changelog/changelog-hero.tsx | 48 - components/docs/agent-menu.tsx | 85 ++ components/docs/block-preview.tsx | 59 +- components/docs/blocks/code-frame.tsx | 53 + .../docs/blocks/controls/boolean-control.tsx | 32 + .../docs/blocks/controls/color-control.tsx | 47 + .../docs/blocks/controls/control-styles.ts | 21 + .../docs/blocks/controls/number-control.tsx | 62 + .../docs/blocks/controls/select-control.tsx | 98 ++ .../docs/blocks/controls/slider-control.tsx | 197 +++ .../docs/blocks/controls/text-control.tsx | 77 ++ components/docs/blocks/customize-panel.tsx | 153 +++ components/docs/blocks/player/docs-player.tsx | 112 ++ components/docs/blocks/player/player-bar.tsx | 255 ++++ .../docs/blocks/player/player-fallback.tsx | 30 + .../docs/blocks/player/player-ruler.tsx | 164 +++ .../docs/blocks/player/player-stage.tsx | 196 +++ components/docs/blocks/spacing.ts | 7 + components/docs/blocks/use-customizer.ts | 71 + components/docs/callout.tsx | 70 +- components/docs/code-block-command.tsx | 254 ++-- components/docs/code-block.tsx | 38 +- components/docs/code-icons.tsx | 45 - components/docs/component-card-grid.tsx | 27 +- components/docs/component-card.tsx | 278 +++- components/docs/component-customizer.tsx | 353 ++--- components/docs/component-example.tsx | 47 +- components/docs/component-preview.tsx | 223 +-- components/docs/copy-button.tsx | 107 +- components/docs/copy-markdown-button.tsx | 69 +- components/docs/dependencies.tsx | 17 +- components/docs/docs-ad-rail.tsx | 14 - components/docs/docs-header.tsx | 59 - components/docs/docs-search-trigger.tsx | 39 +- components/docs/docs-shell.tsx | 146 +- components/docs/docs-sponsor.tsx | 68 - components/docs/docs-tabs-bar.tsx | 29 - components/docs/docs-tabs.tsx | 49 - .../docs/examples/rolodex-flip-example.tsx | 4 +- .../docs/examples/value-swap-example.tsx | 4 +- components/docs/guide-video.tsx | 195 ++- components/docs/guides/beat-thumbs.tsx | 182 +++ components/docs/guides/director-notes.tsx | 75 + components/docs/guides/guide-copy-button.tsx | 64 + components/docs/guides/guide-ui.tsx | 226 +++ components/docs/guides/mdx-children.ts | 142 ++ components/docs/guides/note.tsx | 87 ++ .../docs/guides/practice/brand-brief.tsx | 145 ++ .../docs/guides/practice/brand-frames.tsx | 102 ++ .../docs/guides/practice/built-rules.tsx | 125 ++ .../docs/guides/practice/built-skeleton.tsx | 125 ++ .../docs/guides/practice/built-vocabulary.tsx | 208 +++ .../docs/guides/practice/clapper-icon.tsx | 19 + .../guides/practice/consistency-strip.tsx | 110 ++ components/docs/guides/practice/cta-card.tsx | 66 + .../docs/guides/practice/definition-table.tsx | 66 + .../docs/guides/practice/directing-finish.tsx | 80 ++ .../docs/guides/practice/directing-loop.tsx | 187 +++ .../guides/practice/directing-options.tsx | 97 ++ .../guides/practice/directing-phrases.tsx | 58 + .../guides/practice/directing-redirect.tsx | 189 +++ .../docs/guides/practice/export-pipeline.tsx | 164 +++ .../docs/guides/practice/format-frames.tsx | 151 ++ components/docs/guides/practice/frame.ts | 12 + .../docs/guides/practice/music-timeline.tsx | 106 ++ components/docs/guides/practice/note-card.tsx | 92 ++ .../docs/guides/practice/phrase-list.tsx | 48 + .../docs/guides/practice/track-sources.tsx | 114 ++ .../docs/guides/practice/two-second-test.tsx | 92 ++ .../docs/guides/practice/words-formulas.tsx | 82 ++ .../docs/guides/practice/words-rules.tsx | 168 +++ components/docs/guides/prompt-block.tsx | 113 ++ components/docs/guides/render-card.tsx | 66 + components/docs/guides/setup/agent-picker.tsx | 98 ++ components/docs/guides/setup/checklist.tsx | 131 ++ .../docs/guides/setup/studio-preview.tsx | 118 ++ components/docs/guides/storyboard-preview.tsx | 208 +++ components/docs/guides/storyboard.tsx | 101 ++ components/docs/guides/video-facts.tsx | 47 + components/docs/guides/words-form.tsx | 130 ++ components/docs/icons-gallery.tsx | 976 +++---------- .../docs/index/category/category-browser.tsx | 182 +++ .../docs/index/category/category-index.tsx | 124 ++ .../docs/index/category/component-group.tsx | 19 + components/docs/index/data.ts | 267 ++++ components/docs/index/filter-chip.tsx | 61 + components/docs/index/filter-field.tsx | 59 + .../docs/index/guides/guide-practices.tsx | 52 + components/docs/index/guides/guide-videos.tsx | 77 ++ components/docs/index/guides/setup-card.tsx | 58 + components/docs/index/guides/video-art.tsx | 53 + components/docs/index/home/category-list.tsx | 73 + components/docs/index/home/guides-feature.tsx | 106 ++ components/docs/index/home/library-tiles.tsx | 106 ++ components/docs/index/home/start-here.tsx | 53 + components/docs/index/icons/icons-section.tsx | 12 + components/docs/index/icons/icons.ts | 746 ++++++++++ components/docs/index/index-section.tsx | 65 + .../docs/index/introduction/compare-table.tsx | 106 ++ components/docs/index/introduction/faq.tsx | 46 + components/docs/index/introduction/glyph.tsx | 135 ++ .../docs/index/introduction/mdx-tree.ts | 76 ++ .../docs/index/introduction/next-links.tsx | 72 + .../docs/index/introduction/not-cards.tsx | 49 + .../docs/index/introduction/overview.tsx | 102 ++ .../docs/index/introduction/quick-start.tsx | 100 ++ .../docs/index/introduction/remotion.tsx | 216 +++ .../docs/index/introduction/runtime.tsx | 219 +++ components/docs/index/introduction/tiers.tsx | 171 +++ .../docs/index/libraries/caption-hero.tsx | 158 +++ .../index/libraries/filter-hero-scene.tsx | 22 + .../index/libraries/filter-hero-section.tsx | 21 + .../docs/index/libraries/filter-hero.tsx | 86 ++ .../index/libraries/filter-photo-scenes.tsx | 87 ++ components/docs/index/libraries/hero-pill.tsx | 45 + .../docs/index/libraries/hero-player.tsx | 143 ++ .../docs/index/libraries/how-it-works.tsx | 44 + .../docs/index/libraries/library-data.ts | 29 + .../docs/index/libraries/library-gallery.tsx | 48 + .../docs/index/libraries/library-grid.tsx | 140 ++ .../index/libraries/registry-hero-player.tsx | 28 + .../docs/index/libraries/runtime-command.tsx | 19 + .../docs/index/libraries/shader-hero.tsx | 61 + .../docs/index/libraries/tile-preview.tsx | 84 ++ .../index/libraries/transcript-sources.tsx | 52 + .../docs/index/libraries/use-in-view.ts | 24 + components/docs/index/new-tag.tsx | 10 + .../docs/index/primitives/atom-cards.tsx | 85 ++ .../docs/index/primitives/block-art.tsx | 234 ++++ .../docs/index/primitives/component-art.tsx | 160 +++ components/docs/index/primitives/data.ts | 29 + .../docs/index/primitives/install-writes.tsx | 58 + .../docs/index/primitives/runtime-rules.tsx | 44 + .../docs/index/primitives/timeline-demo.tsx | 157 +++ .../docs/index/primitives/ui-blocks.tsx | 61 + .../docs/index/primitives/ui-components.tsx | 82 ++ .../docs/index/templates/template-card.tsx | 164 +++ .../docs/index/templates/template-poster.tsx | 112 ++ .../docs/index/templates/template-steps.tsx | 33 + components/docs/install-all.tsx | 20 +- components/docs/install-block.tsx | 32 +- components/docs/new-badge.tsx | 17 +- components/docs/open-in-agent.tsx | 129 ++ components/docs/props-table.tsx | 197 +-- components/docs/shell/agents-link.tsx | 22 + components/docs/shell/docs-icons.tsx | 327 +++++ components/docs/shell/docs-rail.tsx | 30 + components/docs/shell/docs-sidebar.tsx | 55 + components/docs/shell/header-search.tsx | 26 + components/docs/shell/library-switcher.tsx | 98 ++ components/docs/shell/mobile-page-bar.tsx | 37 + components/docs/shell/page-actions.tsx | 107 ++ components/docs/shell/page-context.ts | 74 + components/docs/shell/page-footer.tsx | 77 ++ components/docs/shell/page-header.tsx | 36 + components/docs/shell/page-links.ts | 23 + components/docs/shell/sections-sheet.tsx | 78 ++ components/docs/shell/sidebar-group.tsx | 326 +++++ components/docs/shell/sidebar-model.ts | 154 +++ components/docs/shell/sidebar-tree.tsx | 48 + components/docs/shell/sponsors-card.tsx | 122 ++ components/docs/shell/studio-promo.tsx | 109 ++ components/docs/shell/switcher-tip.tsx | 97 ++ components/docs/studio-actions.tsx | 79 +- components/docs/ui-component-preview.tsx | 232 +--- components/shimmering-text.tsx | 6 +- components/studio-bar.tsx | 63 - components/ui/accordion.tsx | 2 +- components/ui/badge.tsx | 2 +- components/ui/bubble.tsx | 2 +- components/ui/button.tsx | 2 +- components/ui/checkbox.tsx | 2 +- components/ui/combobox.tsx | 2 +- components/ui/elastic-slider.tsx | 564 -------- components/ui/frame.tsx | 81 -- components/ui/input.tsx | 2 +- components/ui/item.tsx | 2 +- components/ui/native-select.tsx | 2 +- components/ui/radio-group.tsx | 2 +- components/ui/scroll-area.tsx | 2 +- components/ui/select.tsx | 2 +- components/ui/slider.tsx | 2 +- components/ui/switch.tsx | 2 +- components/ui/tabs.tsx | 2 +- components/ui/textarea.tsx | 2 +- components/ui/toggle.tsx | 2 +- config/docs-directory.ts | 99 ++ config/docs-layout.json | 8 + config/header-layout.json | 10 + config/site.ts | 58 +- config/sponsors.ts | 7 +- config/x-posts.ts | 169 +++ content/docs/ai/index.mdx | 71 +- .../captions/getting-started/introduction.mdx | 88 +- content/docs/components.mdx | 613 +-------- content/docs/compositions/index.mdx | 44 +- content/docs/effects/index.mdx | 37 +- .../filters/getting-started/introduction.mdx | 67 +- content/docs/getting-started/introduction.mdx | 112 +- content/docs/guides/changelog-video.mdx | 100 +- content/docs/guides/directing-your-agent.mdx | 81 +- content/docs/guides/exporting-your-video.mdx | 20 +- content/docs/guides/feature-announcement.mdx | 107 +- content/docs/guides/how-a-video-is-built.mdx | 77 +- content/docs/guides/index.mdx | 27 +- content/docs/guides/launch-video.mdx | 108 +- content/docs/guides/music-and-sound.mdx | 52 +- .../docs/guides/one-video-three-formats.mdx | 30 +- content/docs/guides/product-demo.mdx | 116 +- content/docs/guides/setup.mdx | 48 +- content/docs/guides/showcase-reel.mdx | 101 +- content/docs/guides/teaser.mdx | 103 +- content/docs/guides/words-on-screen.mdx | 55 +- content/docs/guides/your-brand.mdx | 41 +- content/docs/icons/gallery.mdx | 11 +- content/docs/layout/index.mdx | 31 +- content/docs/motion-graphics/index.mdx | 43 +- .../shaders/getting-started/introduction.mdx | 51 +- content/docs/social/index.mdx | 31 +- content/docs/templates/index.mdx | 43 + content/docs/templates/meta.json | 1 + content/docs/transitions/index.mdx | 209 +-- content/docs/typography/index.mdx | 339 ++--- content/docs/ui-blocks/index.mdx | 78 +- content/docs/ui/index.mdx | 70 +- lib/analytics.ts | 5 + lib/blog.ts | 7 - lib/customizer-config.ts | 10 + lib/docs-layout.ts | 35 + lib/docs-tabs.ts | 17 +- lib/header-layout.ts | 43 + lib/layout.shared.tsx | 14 - lib/mdx-to-markdown.test.ts | 51 + lib/mdx-to-markdown.ts | 57 +- lib/registry-health.ts | 139 ++ lib/sponsor-traffic.ts | 198 +++ lib/studio-bar.ts | 3 - lib/ui-preview-internals.tsx | 40 +- lib/utils.ts | 37 +- lib/video-duration.ts | 101 ++ lib/with-new-badges.tsx | 47 - mdx-components.tsx | 120 +- package.json | 1 + public/landing/shader-cta.png | Bin 0 -> 965803 bytes public/landing/shader-magenta.png | Bin 0 -> 548829 bytes public/landing/shader-violet.png | Bin 0 -> 485222 bytes public/landing/shader-why.png | Bin 0 -> 187532 bytes public/landing/sponsor-aceternity.svg | 1 + public/landing/sponsor-launchfast.png | Bin 0 -> 4700 bytes public/landing/sponsor-neon.svg | 4 + public/landing/sponsor-vidrush.png | Bin 0 -> 8610 bytes public/legal/satin-chip.webp | Bin 0 -> 1980 bytes public/testimonials/JNYBGR.jpg | Bin 0 -> 19879 bytes public/testimonials/bhoomikacodes.jpg | Bin 0 -> 16484 bytes public/testimonials/bzagrodzki.jpg | Bin 0 -> 15460 bytes public/testimonials/davidhaz.jpg | Bin 0 -> 37639 bytes public/testimonials/denicmarko.jpg | Bin 0 -> 10929 bytes public/testimonials/dingyi.jpg | Bin 0 -> 4511 bytes public/testimonials/guillaume_rygn.jpg | Bin 0 -> 27350 bytes public/testimonials/haydenbleasel.jpg | Bin 0 -> 13778 bytes public/testimonials/milessy_bc.jpg | Bin 0 -> 1802 bytes public/testimonials/orcdev.jpg | Bin 0 -> 38038 bytes public/testimonials/shadcn.jpg | Bin 0 -> 30346 bytes public/testimonials/yesadok.jpg | Bin 0 -> 38657 bytes registry/__manifest__.ts | 398 ++++++ registry/remocn/chromatic-wave/config.ts | 1 + registry/remocn/cursor-gravity/config.ts | 1 + .../remocn/gradient-scale-cut-text/config.ts | 1 + registry/remocn/kinetic-morph-text/config.ts | 1 + .../remocn/outline-fill-track-text/config.ts | 1 + registry/remocn/perlin-dissolve/config.ts | 1 + registry/remocn/radial-burst/config.ts | 1 + registry/remocn/rolodex-flip/config.ts | 1 + registry/remocn/rush-type/config.ts | 1 + registry/remocn/search-reveal/config.ts | 1 + registry/remocn/shader-text-reveal/config.ts | 1 + registry/remocn/shadow-sweep-text/config.ts | 1 + registry/remocn/slide-swap/config.ts | 1 + registry/remocn/type-fossil/config.ts | 1 + registry/remocn/value-swap/config.ts | 1 + registry/remocn/wave-wipe/config.ts | 1 + scripts/build-preview-manifest.mts | 70 + source.tsx | 2 + 508 files changed, 40101 insertions(+), 8395 deletions(-) create mode 100644 app/(home)/blog/components/beats-list.tsx create mode 100644 app/(home)/blog/components/blog-header.tsx create mode 100644 app/(home)/blog/components/featured-post.tsx create mode 100644 app/(home)/blog/components/guide-card.tsx create mode 100644 app/(home)/blog/components/more-posts.tsx create mode 100644 app/(home)/blog/components/post-card.tsx create mode 100644 app/(home)/blog/components/post-index-nav.tsx create mode 100644 app/(home)/blog/components/post-index.tsx create mode 100644 app/(home)/blog/components/post-meta.tsx create mode 100644 app/(home)/blog/components/post-poster.tsx create mode 100644 app/(home)/blog/components/screening-player.tsx create mode 100644 app/(home)/blog/lib/post-types.ts create mode 100644 app/(home)/blog/lib/posts.ts create mode 100644 app/(home)/changelog/components/changelog-entry.tsx create mode 100644 app/(home)/changelog/components/changelog-header.tsx rename {components/changelog => app/(home)/changelog/components}/changelog-preview.tsx (95%) rename components/changelog/changelog-video-feed.tsx => app/(home)/changelog/components/video-feed.tsx (69%) delete mode 100644 app/(home)/components/hero-badge.tsx delete mode 100644 app/(home)/components/hero-terminal-bg.tsx create mode 100644 app/(home)/components/landing/header/docs-directory.tsx create mode 100644 app/(home)/components/landing/header/github-stars-link.tsx create mode 100644 app/(home)/components/landing/header/hover-zone.tsx create mode 100644 app/(home)/components/landing/header/landing-nav.tsx create mode 100644 app/(home)/components/landing/header/landing-wordmark.tsx create mode 100644 app/(home)/components/landing/header/mobile-menu.tsx create mode 100644 app/(home)/components/landing/header/pill-track.tsx create mode 100644 app/(home)/components/landing/header/registry-health-badge.tsx create mode 100644 app/(home)/components/landing/header/registry-health-card.tsx create mode 100644 app/(home)/components/landing/header/registry-health.tsx create mode 100644 app/(home)/components/landing/header/stretch-pill.tsx create mode 100644 app/(home)/components/landing/scenes/crt-wordmark.tsx create mode 100644 app/(home)/components/landing/scenes/index.ts create mode 100644 app/(home)/components/landing/sections/final-cta.tsx create mode 100644 app/(home)/components/landing/sections/hero.tsx create mode 100644 app/(home)/components/landing/sections/hero/composer-status.tsx create mode 100644 app/(home)/components/landing/sections/hero/composer/composer-loop.tsx create mode 100644 app/(home)/components/landing/sections/hero/composer/picked-chip.tsx create mode 100644 app/(home)/components/landing/sections/hero/composer/scenarios.ts create mode 100644 app/(home)/components/landing/sections/hero/composer/use-composer-loop.ts create mode 100644 app/(home)/components/landing/sections/hero/floating-scene.tsx create mode 100644 app/(home)/components/landing/sections/hero/hero-headline.tsx create mode 100644 app/(home)/components/landing/sections/hero/prompt-composer.tsx create mode 100644 app/(home)/components/landing/sections/hero/prompt-stage.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/clips.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/composer-signal.ts create mode 100644 app/(home)/components/landing/sections/hero/scenes/config.ts create mode 100644 app/(home)/components/landing/sections/hero/scenes/dither-sweep.ts create mode 100644 app/(home)/components/landing/sections/hero/scenes/hero-scene-field.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/hero-scenes.json create mode 100644 app/(home)/components/landing/sections/hero/scenes/live-clips.ts create mode 100644 app/(home)/components/landing/sections/hero/scenes/scenario-scenes.ts create mode 100644 app/(home)/components/landing/sections/hero/scenes/scene-field.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/sets/effects.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/sets/frames.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/sets/index.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/sets/kit.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/sets/live.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/sets/story.tsx create mode 100644 app/(home)/components/landing/sections/hero/scenes/sets/types.ts create mode 100644 app/(home)/components/landing/sections/hero/studio-pill.tsx create mode 100644 app/(home)/components/landing/sections/hero/tiles/ae-mark.tsx create mode 100644 app/(home)/components/landing/sections/hero/tiles/ae-tile.tsx create mode 100644 app/(home)/components/landing/sections/hero/tiles/clips.tsx create mode 100644 app/(home)/components/landing/sections/hero/tiles/config.ts create mode 100644 app/(home)/components/landing/sections/hero/tiles/hero-tiles.json create mode 100644 app/(home)/components/landing/sections/hero/tiles/hero-tiles.tsx create mode 100644 app/(home)/components/landing/sections/hero/tiles/tile-player.tsx create mode 100644 app/(home)/components/landing/sections/hero/tiles/video-tile.tsx create mode 100644 app/(home)/components/landing/sections/how-it-works.tsx create mode 100644 app/(home)/components/landing/sections/how-it-works/agent-session.tsx create mode 100644 app/(home)/components/landing/sections/how-it-works/session-player.tsx create mode 100644 app/(home)/components/landing/sections/how-it-works/steps-legend.tsx create mode 100644 app/(home)/components/landing/sections/sponsors-strip.tsx create mode 100644 app/(home)/components/landing/sections/sponsors-strip/sponsor-carousel.tsx create mode 100644 app/(home)/components/landing/sections/sponsors-strip/sponsor-cells.tsx create mode 100644 app/(home)/components/landing/sections/sponsors-strip/sponsor-logo.tsx create mode 100644 app/(home)/components/landing/sections/studio-pipeline.tsx create mode 100644 app/(home)/components/landing/sections/studio-pipeline/pipeline-stages.tsx create mode 100644 app/(home)/components/landing/sections/studio-pipeline/studio-copy.tsx create mode 100644 app/(home)/components/landing/sections/testimonials-wall.tsx create mode 100644 app/(home)/components/landing/sections/testimonials-wall/wall-columns.tsx create mode 100644 app/(home)/components/landing/sections/testimonials-wall/wall-footer.tsx create mode 100644 app/(home)/components/landing/sections/testimonials-wall/x-post-card.tsx create mode 100644 app/(home)/components/landing/sections/testimonials-wall/x-spotlight.tsx create mode 100644 app/(home)/components/landing/sections/whats-inside.tsx create mode 100644 app/(home)/components/landing/sections/whats-inside/backgrounds-tile.tsx create mode 100644 app/(home)/components/landing/sections/whats-inside/bento-clip.tsx create mode 100644 app/(home)/components/landing/sections/whats-inside/bento-clips.ts create mode 100644 app/(home)/components/landing/sections/whats-inside/bento.json create mode 100644 app/(home)/components/landing/sections/whats-inside/copy-command-button.tsx create mode 100644 app/(home)/components/landing/sections/whats-inside/family-tile.tsx create mode 100644 app/(home)/components/landing/sections/whats-inside/install-strip.tsx create mode 100644 app/(home)/components/landing/sections/whats-inside/type-remix.tsx create mode 100644 app/(home)/components/landing/sections/whats-inside/typography-tile.tsx create mode 100644 app/(home)/components/landing/sections/why-remocn.tsx create mode 100644 app/(home)/components/landing/sections/why-remocn/compare-card.tsx create mode 100644 app/(home)/components/landing/sections/why-remocn/reasons.tsx create mode 100644 app/(home)/components/landing/ui/brand-icons.tsx create mode 100644 app/(home)/components/landing/ui/catalog-card.tsx create mode 100644 app/(home)/components/landing/ui/download-button.tsx create mode 100644 app/(home)/components/landing/ui/landing-button.tsx create mode 100644 app/(home)/components/landing/ui/live-silk.tsx create mode 100644 app/(home)/components/landing/ui/metal-ring.tsx create mode 100644 app/(home)/components/landing/ui/pause-offscreen.tsx create mode 100644 app/(home)/components/landing/ui/remocn-mark.tsx create mode 100644 app/(home)/components/landing/ui/reveal-scope.tsx create mode 100644 app/(home)/components/landing/ui/roll-player/roll-buttons.tsx create mode 100644 app/(home)/components/landing/ui/roll-player/roll-player.tsx create mode 100644 app/(home)/components/landing/ui/roll-player/roll-timeline.tsx create mode 100644 app/(home)/components/landing/ui/section-title.tsx delete mode 100644 app/(home)/components/section-heading.tsx delete mode 100644 app/(home)/components/sections/faq.tsx delete mode 100644 app/(home)/components/sections/final-cta.tsx delete mode 100644 app/(home)/components/sections/hero-scroll-video.tsx delete mode 100644 app/(home)/components/sections/hero.tsx delete mode 100644 app/(home)/components/sections/how-it-works-viz.tsx delete mode 100644 app/(home)/components/sections/how-it-works.tsx delete mode 100644 app/(home)/components/sections/landing-partners.tsx delete mode 100644 app/(home)/components/sections/shaders-viz.tsx delete mode 100644 app/(home)/components/sections/testimonials.tsx delete mode 100644 app/(home)/components/sections/transitions-viz.tsx delete mode 100644 app/(home)/components/sections/whats-inside.tsx delete mode 100644 app/(home)/components/sections/why-remocn.tsx create mode 100644 app/(home)/components/site-page/copy-text-button.tsx create mode 100644 app/(home)/components/site-page/page-header.tsx create mode 100644 app/(home)/components/site-page/play-glyph.tsx create mode 100644 app/(home)/components/site-page/use-active-section.ts create mode 100644 app/(home)/components/site-page/use-loop-controls.ts delete mode 100644 app/(home)/components/sponsor-card.tsx delete mode 100644 app/(home)/components/sponsor-grid.tsx delete mode 100644 app/(home)/components/sticky-header-shell.tsx delete mode 100644 app/(home)/components/threads-icon.tsx delete mode 100644 app/(home)/components/x-icon.tsx create mode 100644 app/(home)/legal/components/legal-article.tsx create mode 100644 app/(home)/legal/components/legal-contact.tsx create mode 100644 app/(home)/legal/components/legal-contents-bar.tsx create mode 100644 app/(home)/legal/components/legal-hero.tsx create mode 100644 app/(home)/legal/components/legal-index.tsx create mode 100644 app/(home)/legal/content.tsx create mode 100644 app/(home)/showcases/components/reel/clip-list.tsx create mode 100644 app/(home)/showcases/components/reel/inspector.tsx create mode 100644 app/(home)/showcases/components/reel/monitor.tsx create mode 100644 app/(home)/showcases/components/reel/showcase-reel.tsx create mode 100644 app/(home)/showcases/components/reel/timeline.tsx create mode 100644 app/(home)/showcases/components/reel/use-reel-player.ts delete mode 100644 app/(home)/showcases/components/showcase-author.tsx delete mode 100644 app/(home)/showcases/components/showcase-components.tsx create mode 100644 app/(home)/showcases/components/showcase-details.tsx delete mode 100644 app/(home)/showcases/components/showcase-grid.tsx create mode 100644 app/(home)/showcases/components/showcases-header.tsx delete mode 100644 app/(home)/showcases/components/showcases-hero.tsx delete mode 100644 app/(home)/showcases/components/use-hover-capable.ts create mode 100644 app/(home)/showcases/lib/docs-urls.ts create mode 100644 app/(home)/showcases/lib/reel-types.ts create mode 100644 app/(home)/showcases/lib/reel.ts create mode 100644 app/(home)/sponsors/components/credits.tsx create mode 100644 app/(home)/sponsors/components/credits/credit-entry.tsx create mode 100644 app/(home)/sponsors/components/credits/credit-groups.ts create mode 100644 app/(home)/sponsors/components/credits/credits-roll.tsx create mode 100644 app/(home)/sponsors/components/hero.tsx create mode 100644 app/(home)/sponsors/components/hero/hero-actions.tsx create mode 100644 app/(home)/sponsors/components/hero/openpanel-mark.tsx delete mode 100644 app/(home)/sponsors/components/sections/hero.tsx delete mode 100644 app/(home)/sponsors/components/sections/tiers.tsx delete mode 100644 app/(home)/sponsors/components/sections/wall-of-love.tsx create mode 100644 app/(home)/sponsors/components/tiers.tsx create mode 100644 app/(home)/sponsors/components/tiers/tier-button.tsx create mode 100644 app/(home)/sponsors/components/tiers/tier-card.tsx create mode 100644 app/(home)/sponsors/components/traffic.tsx create mode 100644 app/(home)/sponsors/components/traffic/bar-list.tsx create mode 100644 app/(home)/sponsors/components/traffic/card.tsx create mode 100644 app/(home)/sponsors/components/traffic/curve.ts create mode 100644 app/(home)/sponsors/components/traffic/devices-card.tsx create mode 100644 app/(home)/sponsors/components/traffic/format.ts create mode 100644 app/(home)/sponsors/components/traffic/stats-column.tsx create mode 100644 app/(home)/sponsors/components/traffic/visitors-card.tsx create mode 100644 app/(home)/sponsors/components/traffic/visitors-chart.tsx delete mode 100644 app/(home)/stars/components/stargazers-deprecated-notice.tsx create mode 100644 app/api/lab/docs-layout/route.ts create mode 100644 app/api/lab/header-layout/route.ts create mode 100644 app/api/lab/hero-scenes/route.ts create mode 100644 app/api/lab/hero-tiles/route.ts create mode 100644 app/api/lab/whats-inside/route.ts create mode 100644 app/fonts/PaperMono-OFL.txt create mode 100644 app/fonts/PaperMono-Variable.woff2 create mode 100644 app/lab/_components/clip-editor.tsx create mode 100644 app/lab/docs-layout/docs-layout-lab.tsx create mode 100644 app/lab/docs-layout/page.tsx create mode 100644 app/lab/header-layout/header-layout-lab.tsx create mode 100644 app/lab/header-layout/page.tsx create mode 100644 app/lab/hero-scenes/hero-scenes-lab.tsx create mode 100644 app/lab/hero-scenes/page.tsx create mode 100644 app/lab/hero-tiles/hero-tiles-lab.tsx create mode 100644 app/lab/hero-tiles/page.tsx create mode 100644 app/lab/whats-inside/bento-lab.tsx create mode 100644 app/lab/whats-inside/page.tsx create mode 100644 components/Silk.tsx delete mode 100644 components/changelog/changelog-hero.tsx create mode 100644 components/docs/agent-menu.tsx create mode 100644 components/docs/blocks/code-frame.tsx create mode 100644 components/docs/blocks/controls/boolean-control.tsx create mode 100644 components/docs/blocks/controls/color-control.tsx create mode 100644 components/docs/blocks/controls/control-styles.ts create mode 100644 components/docs/blocks/controls/number-control.tsx create mode 100644 components/docs/blocks/controls/select-control.tsx create mode 100644 components/docs/blocks/controls/slider-control.tsx create mode 100644 components/docs/blocks/controls/text-control.tsx create mode 100644 components/docs/blocks/customize-panel.tsx create mode 100644 components/docs/blocks/player/docs-player.tsx create mode 100644 components/docs/blocks/player/player-bar.tsx create mode 100644 components/docs/blocks/player/player-fallback.tsx create mode 100644 components/docs/blocks/player/player-ruler.tsx create mode 100644 components/docs/blocks/player/player-stage.tsx create mode 100644 components/docs/blocks/spacing.ts create mode 100644 components/docs/blocks/use-customizer.ts delete mode 100644 components/docs/code-icons.tsx delete mode 100644 components/docs/docs-ad-rail.tsx delete mode 100644 components/docs/docs-header.tsx delete mode 100644 components/docs/docs-sponsor.tsx delete mode 100644 components/docs/docs-tabs-bar.tsx delete mode 100644 components/docs/docs-tabs.tsx create mode 100644 components/docs/guides/beat-thumbs.tsx create mode 100644 components/docs/guides/director-notes.tsx create mode 100644 components/docs/guides/guide-copy-button.tsx create mode 100644 components/docs/guides/guide-ui.tsx create mode 100644 components/docs/guides/mdx-children.ts create mode 100644 components/docs/guides/note.tsx create mode 100644 components/docs/guides/practice/brand-brief.tsx create mode 100644 components/docs/guides/practice/brand-frames.tsx create mode 100644 components/docs/guides/practice/built-rules.tsx create mode 100644 components/docs/guides/practice/built-skeleton.tsx create mode 100644 components/docs/guides/practice/built-vocabulary.tsx create mode 100644 components/docs/guides/practice/clapper-icon.tsx create mode 100644 components/docs/guides/practice/consistency-strip.tsx create mode 100644 components/docs/guides/practice/cta-card.tsx create mode 100644 components/docs/guides/practice/definition-table.tsx create mode 100644 components/docs/guides/practice/directing-finish.tsx create mode 100644 components/docs/guides/practice/directing-loop.tsx create mode 100644 components/docs/guides/practice/directing-options.tsx create mode 100644 components/docs/guides/practice/directing-phrases.tsx create mode 100644 components/docs/guides/practice/directing-redirect.tsx create mode 100644 components/docs/guides/practice/export-pipeline.tsx create mode 100644 components/docs/guides/practice/format-frames.tsx create mode 100644 components/docs/guides/practice/frame.ts create mode 100644 components/docs/guides/practice/music-timeline.tsx create mode 100644 components/docs/guides/practice/note-card.tsx create mode 100644 components/docs/guides/practice/phrase-list.tsx create mode 100644 components/docs/guides/practice/track-sources.tsx create mode 100644 components/docs/guides/practice/two-second-test.tsx create mode 100644 components/docs/guides/practice/words-formulas.tsx create mode 100644 components/docs/guides/practice/words-rules.tsx create mode 100644 components/docs/guides/prompt-block.tsx create mode 100644 components/docs/guides/render-card.tsx create mode 100644 components/docs/guides/setup/agent-picker.tsx create mode 100644 components/docs/guides/setup/checklist.tsx create mode 100644 components/docs/guides/setup/studio-preview.tsx create mode 100644 components/docs/guides/storyboard-preview.tsx create mode 100644 components/docs/guides/storyboard.tsx create mode 100644 components/docs/guides/video-facts.tsx create mode 100644 components/docs/guides/words-form.tsx create mode 100644 components/docs/index/category/category-browser.tsx create mode 100644 components/docs/index/category/category-index.tsx create mode 100644 components/docs/index/category/component-group.tsx create mode 100644 components/docs/index/data.ts create mode 100644 components/docs/index/filter-chip.tsx create mode 100644 components/docs/index/filter-field.tsx create mode 100644 components/docs/index/guides/guide-practices.tsx create mode 100644 components/docs/index/guides/guide-videos.tsx create mode 100644 components/docs/index/guides/setup-card.tsx create mode 100644 components/docs/index/guides/video-art.tsx create mode 100644 components/docs/index/home/category-list.tsx create mode 100644 components/docs/index/home/guides-feature.tsx create mode 100644 components/docs/index/home/library-tiles.tsx create mode 100644 components/docs/index/home/start-here.tsx create mode 100644 components/docs/index/icons/icons-section.tsx create mode 100644 components/docs/index/icons/icons.ts create mode 100644 components/docs/index/index-section.tsx create mode 100644 components/docs/index/introduction/compare-table.tsx create mode 100644 components/docs/index/introduction/faq.tsx create mode 100644 components/docs/index/introduction/glyph.tsx create mode 100644 components/docs/index/introduction/mdx-tree.ts create mode 100644 components/docs/index/introduction/next-links.tsx create mode 100644 components/docs/index/introduction/not-cards.tsx create mode 100644 components/docs/index/introduction/overview.tsx create mode 100644 components/docs/index/introduction/quick-start.tsx create mode 100644 components/docs/index/introduction/remotion.tsx create mode 100644 components/docs/index/introduction/runtime.tsx create mode 100644 components/docs/index/introduction/tiers.tsx create mode 100644 components/docs/index/libraries/caption-hero.tsx create mode 100644 components/docs/index/libraries/filter-hero-scene.tsx create mode 100644 components/docs/index/libraries/filter-hero-section.tsx create mode 100644 components/docs/index/libraries/filter-hero.tsx create mode 100644 components/docs/index/libraries/filter-photo-scenes.tsx create mode 100644 components/docs/index/libraries/hero-pill.tsx create mode 100644 components/docs/index/libraries/hero-player.tsx create mode 100644 components/docs/index/libraries/how-it-works.tsx create mode 100644 components/docs/index/libraries/library-data.ts create mode 100644 components/docs/index/libraries/library-gallery.tsx create mode 100644 components/docs/index/libraries/library-grid.tsx create mode 100644 components/docs/index/libraries/registry-hero-player.tsx create mode 100644 components/docs/index/libraries/runtime-command.tsx create mode 100644 components/docs/index/libraries/shader-hero.tsx create mode 100644 components/docs/index/libraries/tile-preview.tsx create mode 100644 components/docs/index/libraries/transcript-sources.tsx create mode 100644 components/docs/index/libraries/use-in-view.ts create mode 100644 components/docs/index/new-tag.tsx create mode 100644 components/docs/index/primitives/atom-cards.tsx create mode 100644 components/docs/index/primitives/block-art.tsx create mode 100644 components/docs/index/primitives/component-art.tsx create mode 100644 components/docs/index/primitives/data.ts create mode 100644 components/docs/index/primitives/install-writes.tsx create mode 100644 components/docs/index/primitives/runtime-rules.tsx create mode 100644 components/docs/index/primitives/timeline-demo.tsx create mode 100644 components/docs/index/primitives/ui-blocks.tsx create mode 100644 components/docs/index/primitives/ui-components.tsx create mode 100644 components/docs/index/templates/template-card.tsx create mode 100644 components/docs/index/templates/template-poster.tsx create mode 100644 components/docs/index/templates/template-steps.tsx create mode 100644 components/docs/open-in-agent.tsx create mode 100644 components/docs/shell/agents-link.tsx create mode 100644 components/docs/shell/docs-icons.tsx create mode 100644 components/docs/shell/docs-rail.tsx create mode 100644 components/docs/shell/docs-sidebar.tsx create mode 100644 components/docs/shell/header-search.tsx create mode 100644 components/docs/shell/library-switcher.tsx create mode 100644 components/docs/shell/mobile-page-bar.tsx create mode 100644 components/docs/shell/page-actions.tsx create mode 100644 components/docs/shell/page-context.ts create mode 100644 components/docs/shell/page-footer.tsx create mode 100644 components/docs/shell/page-header.tsx create mode 100644 components/docs/shell/page-links.ts create mode 100644 components/docs/shell/sections-sheet.tsx create mode 100644 components/docs/shell/sidebar-group.tsx create mode 100644 components/docs/shell/sidebar-model.ts create mode 100644 components/docs/shell/sidebar-tree.tsx create mode 100644 components/docs/shell/sponsors-card.tsx create mode 100644 components/docs/shell/studio-promo.tsx create mode 100644 components/docs/shell/switcher-tip.tsx delete mode 100644 components/studio-bar.tsx delete mode 100644 components/ui/elastic-slider.tsx delete mode 100644 components/ui/frame.tsx create mode 100644 config/docs-directory.ts create mode 100644 config/docs-layout.json create mode 100644 config/header-layout.json create mode 100644 config/x-posts.ts create mode 100644 content/docs/templates/index.mdx create mode 100644 lib/docs-layout.ts create mode 100644 lib/header-layout.ts delete mode 100644 lib/layout.shared.tsx create mode 100644 lib/mdx-to-markdown.test.ts create mode 100644 lib/registry-health.ts create mode 100644 lib/sponsor-traffic.ts delete mode 100644 lib/studio-bar.ts create mode 100644 lib/video-duration.ts delete mode 100644 lib/with-new-badges.tsx create mode 100644 public/landing/shader-cta.png create mode 100644 public/landing/shader-magenta.png create mode 100644 public/landing/shader-violet.png create mode 100644 public/landing/shader-why.png create mode 100644 public/landing/sponsor-aceternity.svg create mode 100644 public/landing/sponsor-launchfast.png create mode 100644 public/landing/sponsor-neon.svg create mode 100644 public/landing/sponsor-vidrush.png create mode 100644 public/legal/satin-chip.webp create mode 100644 public/testimonials/JNYBGR.jpg create mode 100644 public/testimonials/bhoomikacodes.jpg create mode 100644 public/testimonials/bzagrodzki.jpg create mode 100644 public/testimonials/davidhaz.jpg create mode 100644 public/testimonials/denicmarko.jpg create mode 100644 public/testimonials/dingyi.jpg create mode 100644 public/testimonials/guillaume_rygn.jpg create mode 100644 public/testimonials/haydenbleasel.jpg create mode 100644 public/testimonials/milessy_bc.jpg create mode 100644 public/testimonials/orcdev.jpg create mode 100644 public/testimonials/shadcn.jpg create mode 100644 public/testimonials/yesadok.jpg diff --git a/CLAUDE.md b/CLAUDE.md index d2410e56..450bba6b 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -80,3 +80,13 @@ bun run build # production-сборка сайта bun run typecheck # tsc --noEmit bun run lint # biome check bun run registry:build # пересборка registry-artifacts из registry/ + + + +# This is NOT the Next.js you know + +This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices. + +This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean. + + diff --git a/app/(home)/blog/[slug]/page.tsx b/app/(home)/blog/[slug]/page.tsx index 44086464..efe6b18f 100644 --- a/app/(home)/blog/[slug]/page.tsx +++ b/app/(home)/blog/[slug]/page.tsx @@ -1,12 +1,20 @@ -import { ArrowLeft } from "lucide-react"; import type { Metadata } from "next"; import Link from "next/link"; import { notFound } from "next/navigation"; import { blog } from "@/.source/server"; import { GuideVideo } from "@/components/docs/guide-video"; -import { blogDateFormatter, blogSlug } from "@/lib/blog"; -import { sortByDateDesc } from "@/lib/changelog"; +import { blogSlug } from "@/lib/blog"; +import { cn } from "@/lib/utils"; import { getMDXComponents } from "@/mdx-components"; +import { landingButtonVariants } from "../../components/landing/ui/landing-button"; +import { CopyTextButton } from "../../components/site-page/copy-text-button"; +import { pageHeaderButton } from "../../components/site-page/page-header"; +import { MorePosts } from "../components/more-posts"; +import { PostIndexNav } from "../components/post-index-nav"; +import { PostMeta } from "../components/post-meta"; +import { ScreeningPlayer } from "../components/screening-player"; +import { POST_KIND_LABEL } from "../lib/post-types"; +import { getBlogPosts } from "../lib/posts"; type PageProps = { params: Promise<{ slug: string }> }; @@ -54,87 +62,97 @@ export async function generateMetadata({ const postComponents = { ...getMDXComponents(), GuideVideo }; +const MORE_POSTS = 3; + export default async function BlogPostPage({ params }: PageProps) { const { slug } = await params; const post = getPost(slug); if (!post) notFound(); - const iso = post.date.toISOString().slice(0, 10); + const posts = await getBlogPosts(); + const index = posts.findIndex((item) => item.slug === slug); + const summary = posts[index]; + const more = [...posts.slice(index + 1), ...posts.slice(0, index)].slice( + 0, + MORE_POSTS, + ); + const headings = post.toc.filter((item) => item.depth <= 3); const MDX = post.body; - const sorted = sortByDateDesc(blog); - const index = sorted.findIndex((p) => blogSlug(p) === slug); - const next = index === -1 ? undefined : sorted[index + 1]; return ( -
-
- -
-
+ + + + ); } diff --git a/app/(home)/blog/components/beats-list.tsx b/app/(home)/blog/components/beats-list.tsx new file mode 100644 index 00000000..f1e5687a --- /dev/null +++ b/app/(home)/blog/components/beats-list.tsx @@ -0,0 +1,56 @@ +import { cn } from "@/lib/utils"; + +/** + * Numbered storyboard beats; the first is lit. With `limit`, the rest + * collapse into a "+N more beats in the storyboard" row. + */ +export function BeatsList({ + beats, + limit, + className, +}: { + beats: string[]; + limit?: number; + className?: string; +}) { + const shown = limit ? beats.slice(0, limit) : beats; + const more = beats.length - shown.length; + + return ( +
    + {shown.map((beat, index) => ( +
  1. + + {String(index + 1).padStart(2, "0")} + + + {beat} + +
    2. + ))} + {more > 0 && ( +
  2. + + +{more} + + + more beats in the storyboard + +
    3. + )} +
+ ); +} diff --git a/app/(home)/blog/components/blog-header.tsx b/app/(home)/blog/components/blog-header.tsx new file mode 100644 index 00000000..2b06c507 --- /dev/null +++ b/app/(home)/blog/components/blog-header.tsx @@ -0,0 +1,45 @@ +import { cn } from "@/lib/utils"; +import { landingButtonVariants } from "../../components/landing/ui/landing-button"; +import { + pageHeaderButton, + SitePageHeader, +} from "../../components/site-page/page-header"; + +export const BLOG_LEAD = + "The storyboard, the decisions that made each one work, and the prompt that rebuilds it."; + +export function BlogHeader({ count }: { count: number }) { + return ( + +
+ + + Subscribe via RSS + +
+ + ); +} diff --git a/app/(home)/blog/components/featured-post.tsx b/app/(home)/blog/components/featured-post.tsx new file mode 100644 index 00000000..a7461c8a --- /dev/null +++ b/app/(home)/blog/components/featured-post.tsx @@ -0,0 +1,77 @@ +import { cn } from "@/lib/utils"; +import { + LandingButton, + landingButtonVariants, +} from "../../components/landing/ui/landing-button"; +import { CopyTextButton } from "../../components/site-page/copy-text-button"; +import { type BlogPostSummary, POST_KIND_LABEL } from "../lib/post-types"; +import { BeatsList } from "./beats-list"; +import { PostMeta } from "./post-meta"; +import { ScreeningPlayer } from "./screening-player"; + +const BUTTON = + "h-12 w-full rounded-control-sm px-4 text-[15px] leading-5 font-medium md:h-10 md:w-auto"; + +/** + * The screening room: the newest launch video in its player, next to the + * first beats of its storyboard and the two ways in (read it, copy the + * prompt that rebuilds it). + */ +export function FeaturedPost({ post }: { post: BlogPostSummary }) { + return ( +
+
+ {post.video && ( + + )} + +
+
+ +

+ {post.title} +

+

+ {post.description} +

+
+ +
+ +
+ + Read the making-of + + {post.prompt && ( + + Copy the prompt + + )} +
+
+
+
+
+ ); +} diff --git a/app/(home)/blog/components/guide-card.tsx b/app/(home)/blog/components/guide-card.tsx new file mode 100644 index 00000000..73a4e59f --- /dev/null +++ b/app/(home)/blog/components/guide-card.tsx @@ -0,0 +1,35 @@ +import { LandingButton } from "../../components/landing/ui/landing-button"; + +const BUTTON = + "h-12 rounded-control-sm px-4 text-[15px] leading-5 font-medium md:h-10"; + +/** Closing card of the index: where the recipe behind every cut lives. */ +export function GuideCard() { + return ( + + ); +} diff --git a/app/(home)/blog/components/more-posts.tsx b/app/(home)/blog/components/more-posts.tsx new file mode 100644 index 00000000..6b42af70 --- /dev/null +++ b/app/(home)/blog/components/more-posts.tsx @@ -0,0 +1,35 @@ +import Link from "next/link"; +import type { BlogPostSummary } from "../lib/post-types"; +import { PostCard } from "./post-card"; + +/** The next three posts, newest first, under the article. */ +export function MorePosts({ posts }: { posts: BlogPostSummary[] }) { + if (posts.length === 0) return null; + + return ( +
+
+ + + All posts + +
+
+ {posts.map((post) => ( + + ))} +
+
+ ); +} diff --git a/app/(home)/blog/components/post-card.tsx b/app/(home)/blog/components/post-card.tsx new file mode 100644 index 00000000..4baeb2c1 --- /dev/null +++ b/app/(home)/blog/components/post-card.tsx @@ -0,0 +1,67 @@ +import Link from "next/link"; +import { cn } from "@/lib/utils"; +import { type BlogPostSummary, POST_KIND_LABEL } from "../lib/post-types"; +import { PostMeta } from "./post-meta"; +import { PostPoster } from "./post-poster"; + +/** + * Index card: poster, meta, title, description; the whole card links to the + * post. `lg` sits two-up, `sm` in the three-column grid. + */ +export function PostCard({ + post, + size, +}: { + post: BlogPostSummary; + size: "lg" | "sm"; +}) { + const lg = size === "lg"; + const beats = post.beats.length; + + return ( + + +
+ {lg || beats === 0 ? ( + + ) : ( + + )} +

+ {post.title} +

+

+ {post.description} +

+
+ + ); +} diff --git a/app/(home)/blog/components/post-index-nav.tsx b/app/(home)/blog/components/post-index-nav.tsx new file mode 100644 index 00000000..9add8484 --- /dev/null +++ b/app/(home)/blog/components/post-index-nav.tsx @@ -0,0 +1,68 @@ +"use client"; + +import { type ReactNode, useMemo } from "react"; +import { cn } from "@/lib/utils"; +import { useActiveSection } from "../../components/site-page/use-active-section"; + +export type PostHeading = { title: ReactNode; url: string; depth: number }; + +/** + * Sticky "In this post" index beside the article, numbered like the legal + * page; the heading being read is raised. + */ +export function PostIndexNav({ headings }: { headings: PostHeading[] }) { + const ids = useMemo( + () => headings.map((heading) => heading.url.replace(/^#/, "")), + [headings], + ); + const active = useActiveSection(ids); + + return ( + + ); +} diff --git a/app/(home)/blog/components/post-index.tsx b/app/(home)/blog/components/post-index.tsx new file mode 100644 index 00000000..b1098b14 --- /dev/null +++ b/app/(home)/blog/components/post-index.tsx @@ -0,0 +1,95 @@ +"use client"; + +import { useState } from "react"; +import { cn } from "@/lib/utils"; +import { + type BlogPostSummary, + POST_KIND_LABEL, + type PostKind, +} from "../lib/post-types"; +import { GuideCard } from "./guide-card"; +import { PostCard } from "./post-card"; + +type Filter = "all" | PostKind; + +const FILTERS: { id: Filter; label: string }[] = [ + { id: "all", label: "All posts" }, + { id: "launch", label: `${POST_KIND_LABEL.launch}s` }, + { id: "product", label: POST_KIND_LABEL.product }, +]; + +/** + * Everything but the featured post: a kind filter, the two newest as large + * cards, the rest in a three-column grid closed by the guide card. + */ +export function PostIndex({ + posts, + counts, +}: { + posts: BlogPostSummary[]; + /** Totals per filter, featured post included. */ + counts: Record; +}) { + const [filter, setFilter] = useState("all"); + const shown = + filter === "all" ? posts : posts.filter((post) => post.kind === filter); + const large = shown.slice(0, 2); + const rest = shown.slice(2); + + return ( +
+
+
+ {FILTERS.map((item) => { + const active = item.id === filter; + return ( + + ); + })} +
+
+ + {large.length > 0 && ( +
+ {large.map((post) => ( + + ))} +
+ )} + +
+ {rest.map((post) => ( + + ))} + +
+
+ ); +} diff --git a/app/(home)/blog/components/post-meta.tsx b/app/(home)/blog/components/post-meta.tsx new file mode 100644 index 00000000..bd744c9b --- /dev/null +++ b/app/(home)/blog/components/post-meta.tsx @@ -0,0 +1,42 @@ +import type { ReactNode } from "react"; +import { cn } from "@/lib/utils"; + +/** Date (mono on desktop) followed by an optional tag or trailing note. */ +export function PostMeta({ + iso, + date, + tag, + trailing, + className, +}: { + iso: string; + date: string; + tag?: ReactNode; + /** Pushed to the far end, e.g. "9 beats". */ + trailing?: ReactNode; + className?: string; +}) { + return ( +
+ + + {tag && {tag}} + + {trailing && {trailing}} +
+ ); +} + +export function PostTag({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} diff --git a/app/(home)/blog/components/post-poster.tsx b/app/(home)/blog/components/post-poster.tsx new file mode 100644 index 00000000..96c9c8bc --- /dev/null +++ b/app/(home)/blog/components/post-poster.tsx @@ -0,0 +1,52 @@ +import { cn } from "@/lib/utils"; +import { formatDuration } from "@/lib/video-duration"; +import { PlayGlyph } from "../../components/site-page/play-glyph"; + +/** + * Poster frame of a post's video with a play key: a plain 36px key on large + * cards, a key + duration chip on small ones. + */ +export function PostPoster({ + poster, + duration, + size, +}: { + poster: string | null; + duration: number | null; + size: "lg" | "sm"; +}) { + return ( +
+ {poster && ( + // biome-ignore lint/performance/noImgElement: remote CDN video posters of arbitrary origin + + )} + {size === "lg" ? ( + + + + ) : ( + + + + + {duration !== null && ( + + {formatDuration(duration)} + + )} + + )} +
+ ); +} diff --git a/app/(home)/blog/components/screening-player.tsx b/app/(home)/blog/components/screening-player.tsx new file mode 100644 index 00000000..5da8404c --- /dev/null +++ b/app/(home)/blog/components/screening-player.tsx @@ -0,0 +1,193 @@ +"use client"; + +import { + useCallback, + useEffect, + useLayoutEffect, + useRef, + useState, +} from "react"; +import { cn } from "@/lib/utils"; +import { formatDuration } from "@/lib/video-duration"; +import { PauseGlyph, PlayGlyph } from "../../components/site-page/play-glyph"; + +/** + * The screening-room player: the video on a dark stage, a white play key, + * the elapsed / total time, a ruler with a scrubbable playhead and the beat + * count. Plays only on request; nothing autoplays. + */ +export function ScreeningPlayer({ + src, + poster, + label, + duration: durationHint, + beats, + className, +}: { + src: string; + poster?: string | null; + label: string; + /** Seconds, known on the server; replaced by the video's own metadata. */ + duration: number | null; + beats: number; + className?: string; +}) { + const videoRef = useRef(null); + const rulerRef = useRef(null); + const headRef = useRef(null); + const [playing, setPlaying] = useState(false); + const [time, setTime] = useState(0); + const [duration, setDuration] = useState(durationHint ?? 0); + + // `timeupdate` fires about four times a second, too coarse for the + // playhead, so it is painted from the video's own clock every frame. + const paintHead = useCallback(() => { + const video = videoRef.current; + const ruler = rulerRef.current; + const head = headRef.current; + if (!video || !ruler || !head || duration <= 0) return; + const progress = Math.min(video.currentTime / duration, 1); + head.style.transform = `translateX(${(ruler.clientWidth - 19) * progress}px)`; + }, [duration]); + + // biome-ignore lint/correctness/useExhaustiveDependencies: repaint when a seek or `timeupdate` moves the time + useLayoutEffect(() => { + paintHead(); + }, [time, paintHead]); + + useEffect(() => { + const ruler = rulerRef.current; + if (!ruler) return; + const observer = new ResizeObserver(paintHead); + observer.observe(ruler); + return () => observer.disconnect(); + }, [paintHead]); + + useEffect(() => { + if (!playing) return; + let frame = 0; + const tick = () => { + paintHead(); + frame = requestAnimationFrame(tick); + }; + frame = requestAnimationFrame(tick); + return () => cancelAnimationFrame(frame); + }, [playing, paintHead]); + + const toggle = () => { + const video = videoRef.current; + if (!video) return; + if (video.paused) void video.play().catch(() => {}); + else video.pause(); + }; + + return ( +
+
+ {/* biome-ignore lint/a11y/useMediaCaption: the CDN videos ship without caption tracks */} +
+ +
+ + + {formatDuration(time)} / {formatDuration(duration)} + + +
+ {duration > 0 && } +
+ + {beats > 0 && ( + + {beats} beats + + )} +
+
+ ); +} + +/** + * Seconds along the ruler: every 10s plus the end on desktop (with hairline + * separators), start / a third / end on mobile. + */ +function RulerLabels({ duration }: { duration: number }) { + const end = Math.round(duration); + const stops: number[] = []; + for (let t = 0; t < end; t += 10) stops.push(t); + if (stops.length > 1 && end - stops[stops.length - 1] <= 5) stops.pop(); + stops.push(end); + const third = Math.round(end / 30) * 10; + const compact = new Set([0, third, end]); + + return stops.map((t, index) => ( +