Add import button to saved pipelines section with file picker,
validation, and error display with auto-dismiss. Section now
always renders with empty state text when no pipelines exist.
- Reduce per-tool time from 15 to 10 frames (total montage: 480 frames)
- Update total composition duration from 840 to 600 frames in Root.tsx
- Increase micro-visualization from 2 to 4 frames for visibility
- Add varied entry paths: diagonal entries from all 8 directions instead
of just left/right/top
- Adjust all act timings (grid pulse, category labels, tagline) to match
the compressed timeline
- ToolPill: add box-shadow (0 2px 8px), gradient overlay for glossy depth,
subtle white border for definition
- ToolGalaxy: fix tagline so counter number appears before "tools. Zero cloud
dependency." text instead of being separated
Use real screenshots and sample photos from apps/videos/public/screenshots/
instead of CSS-gradient PhotoPlaceholder components:
- PipelineFlow: landscape photo for thumbnails with object-position variation
- AiMagicReel: portrait photo for bg removal, B&W photo for colorization,
landscape for super resolution and restoration segments
- PrivacyPromise: real portrait/landscape/B&W photos in shield, larger padlock
- OneCommand: real app-full.png screenshot instead of wireframe AppMockup,
increased amber glow to 12%
- CloudVsLocal: real portrait photos for all thumbnails, larger server icons
(36px), amplified shake (5px) and vibrate (3px), escalated red tint overlay
- ShieldIcon: increased stroke width to 3.5px, added gradient fill
- Preview font size now calculated from actual container width, not viewport
- Preview stroke scales proportionally with font size (4% ratio)
- Server stroke reduced from 6% to 4% to match preview
- Added ResizeObserver to track container width for accurate sizing
- Added paint-order: stroke fill to CSS preview for consistent rendering
- Auto font size now capped at min(200, boxHeight/2, boxWidth/3) to prevent
oversized text on server render
- Text vertically centered within each text box
- Sidebar color labels shortened (Text/Stroke) with min-w-0 to prevent overflow
Tracks from Mixkit (royalty-free, no attribution required):
- PromoTeaser: "Life's a Movie" by Arulo (50% vol)
- XLaunchVideo: "Techno Fest Vibes" by A.M. (40% vol)
- ProductDemo: "Rising Forest" by Diego Nava (30% vol)
The containerType: inline-size CSS containment prevented the image from
expanding its parent container, causing the preview to render at 0x0px.
Removed inline-block and containerType, switched font sizing to vw units.
- Created meme-store.ts Zustand store for shared state between panels
- Split monolithic component into meme-generator-preview.tsx (main area)
and meme-generator-settings.tsx (sidebar)
- Added ResultsPanel to tool registry entry
- Fixed thumbnail URLs (.jpg -> .webp extension)
- Fixed text overlay sizing and positioning
5-act composition (540 frames, 1920x1080): split screen with cloud vs
local comparison, escalating chaos on the cloud side while local stays
calm, resolving to full-screen "Your images never leave your network."
Also updates Root.tsx to register all 10 landing page compositions,
removes ComponentTest, and resolves merge conflict markers.
Restore missing landing page compositions (FloatingTools, BrandGradient,
FormatUniverse) lost during branch merge, and fix the @/ path alias in
remotion webpack config to support all composition imports.
The meme generator had everything in one component crammed into the
narrow right sidebar. This splits it into the proper two-panel
architecture (like collage/qr-generate):
- meme-store.ts: shared Zustand store for all meme state and actions
- meme-generator-preview.tsx: ResultsPanel (main area) with gallery,
layout picker, editor preview with CSS text overlay, and result view
- meme-generator-settings.tsx: Settings sidebar with text inputs, font
picker, colors, alignment, and generate button
- tool-registry.tsx: adds ResultsPanel to the meme-generator entry
Also fixes text overlay sizing (reduced from 0.6cqi to 0.45cqi with
smaller stroke width) and moves font injection to a standalone function
callable from either component.
Eight scenes replicating the SnapOtter UI in light theme: Dashboard
overview with search filtering, single tool resize flow, batch
processing with staggered progress, pipeline builder, AI tools
(bg removal, upscale, OCR), image editor, API docs, and end card.
SnapOtter