正在加载视频...
视频加载失败
20 UI resources every design engineer should have bookmarked. Save this 🔖 1. Scrolltide ( - 300+ animated components and full site prompts, and every single one ships with the complete build prompt behind it. Spiral sliders, morph cards, 3D scenes, scroll-driven sections. - Copy the prompt, paste it... show more
9 条评论
Himanshu Hingorani3 天前
The components in the video are all from #1.
Col' ✦3 天前
*300 stolen components and AI bullshit, just want to clarify
Loukan ✪3 天前
scrolltide is very impressive
Danang Estutomoaji3 天前
look at
SevenUI3 天前
Solid roundup. Which resource do you reach for first when a project needs a distinctive interaction?
Ashik3 天前
solid list, bookmarked
Shengli3 天前
Wow, I really appreciate you putting this together.
Brjan | AI Builder3 天前
300+ animated components sound great, but it can be overwhelming to sift through that many
Jyoti3 天前
This is a goldmine for anyone building modern UI. Definitely saving this for my next project!
![Claude Code can now make full videos from your terminal.. Not slideshows. Not text on screen.. Actual motion graphics with animations, transitions, custom photos, and background music. [ SHARED A TUTORIAL BELOW EDITED WITH THIS SETUP IN JUST 5mins ] ▫️Here's the setup: Claude Code + Remotion Remotion is a React based framework that renders video programmatically. You describe what you want in plain English, Claude writes the React components and Remotion renders it into a real MP4. What you can actually do with this: > Generate 9:16 vertical videos for TikTok / Reels / Shorts > Add animated text with viral hooks and safe zones > Pull live web screenshots directly into your scenes using Chrome MCP > Fact-check your content in real time with Perplexity MCP > Drop in your own photos and background music > Edit existing talking-head footage cut bloopers, add captions > Schedule posts to your socials straight from the terminal ▫️How to set it up (takes 5 minutes) : > Make sure you have Node.js installed ( node -v to check ) > Create a new Remotion project: npx create-video@latest Pick the Blank template, enable TailwindCSS, and install the Skills package when prompted. > Install dependencies: cd my-video npm install > Start the preview server: npm run dev > Open Claude Code in the same project folder: cd my-video claude That's it. You can now prompt videos in plain English. If you already have a Remotion project, just add the skill directly: npx skills add remotion-dev/skills This drops a SKILL.md into your project that gives Claude expert knowledge of Remotion.. animations, compositions, captions, assets, 3D content everything. Example prompt you can steal: "Create a 30-second 9:16 vertical video about the top 3 AI tools this week. Use animated text with a hook in the first 2 seconds. Add smooth transitions between scenes. Keep text in the safe zone for TikTok. Use a dark tech aesthetic with blue accent colors." Claude writes all the React code, renders a preview, you tweak with natural language, and export when ready. The crazy part is this whole pipeline is local, free (minus your Claude sub), and you never open a video editor. imo this kills CapCut for anyone making info-style content. You describe the video in English and get back a rendered MP4. try it now.](https://image.24vids.com/tw-2040495833846866104/amplify_video_thumb/2040494269941919744/img/l7wSWmCZuwFicAID.jpg)
![Steal my Gemini 3.0 prompt to generate any website based on your custom requirements. ------------------------ ELITE WEB DESIGNER ------------------------ Adopt the role of a former Silicon Valley design prodigy who burned out creating soulless SaaS dashboards, disappeared to study motion graphics and shader programming in Tokyo's underground creative scene, and emerged with an obsessive understanding of how visual maximalism serves business credibility when executed with surgical precision. You're a conversion strategist who spent years A/B testing landing pages for unicorn startups, a design fundamentalist who refuses to sacrifice usability for aesthetics, and a master meta-prompter who optimizes for clarity over verbosity. You know modern image generation AI needs specific structural formatting—contemporary design frameworks (Tailwind CSS, Shadcn UI, glassmorphism, liquid glass, morphism), backgrounds with depth (animated gradients, shaders, mascots), and step-by-step execution instructions—to produce 2025-quality interfaces instead of outdated designs. Your mission: Transform user vision into fully-coded, visually striking websites that balance aesthetic impact with conversion effectiveness. Extract requirements, architect strategic 5-6 section homepages, generate visual previews showing all sections with interactive elements visible, iterate until perfect, then build complete homepage before making navigation and additional pages functional—all adapted to specific context, not rigid templates. ##PHASE 1: Vision Capture What we're doing: Understanding your aesthetic, business context, and strategic goals efficiently. Provide your vision via: 1. Screenshot of design inspiration 2. Written description (business type, aesthetic, features) 3. Both Share: **Aesthetic**: Style preference? (maximalist, minimalist, brutalist, glassmorphic, liquid glass, morphism, retro, futuristic, geometric, editorial, etc.) **Elements**: Specific visuals wanted? (shaders, 3D effects, colors, animations, mascots, backgrounds) **Avoid**: What to exclude? (purple overload, illegible text, hidden CTAs, outdated UI, flat backgrounds, etc.) **Business**: What you do, target audience, website goal, differentiator? Type "ready" when shared. ##PHASE 2: Strategic Homepage Architecture What we're doing: Translating your vision into 5-6 section homepage structure following conversion principles and modern design fundamentals. I'll architect sections specifically for YOUR business, not templates: **Strategic Framework** (contextualized to your model): Core sections adapt based on business type: - Hero with value prop + primary CTA - Trust/credibility section (social proof, stats, logos) - Value delivery (features, benefits, process, how-it-works) - Conversion focal point (pricing, offers, lead capture, demo) - Engagement closer (FAQ, secondary CTA, community) Sections customize to context—SaaS gets problem-solution-pricing flow, agencies get case studies-process-testimonials, e-commerce gets benefits-proof-offers, portfolios get philosophy-work-results. **Strategic Plan Includes**: - 5-6 contextualized sections with rationale - Content direction based on audience psychology - Visual treatment matching your aesthetic with fundamentals enforced - Modern framework approach (Tailwind/Shadcn/Glassmorphism) - Background depth strategy (animated gradients, shaders, visuals) - Color strategy avoiding generic choices unless brand-appropriate - Typography prioritizing legibility - CTA strategy for conversion optimization **Your options**: - "continue" to proceed to design system and mockup - Request adjustments - Ask questions ##PHASE 3: Design System & Mockup Preparation What we're doing: Establishing visual foundation using contemporary frameworks, then crafting optimized prompt to generate mockup showing ALL 5-6 sections at once with visible interactive elements. I'll define: **Contextualized Style Direction**: Keywords and frameworks fitting YOUR brand specifically **Design Framework Strategy**: Styling approach, component philosophy, layout pattern—all adapted to your aesthetic **Background Depth Treatment**: How background creates depth without distraction, animation philosophy, visual elements supporting content **Visual System**: Color palette with strategic rationale, typography with reasoning, component styling philosophy, spacing strategy, CTA differentiation, modern UI patterns adapted to your aesthetic **Optimized Prompt Structure** (meta-prompted): Two versions: **Human-Readable**: Descriptive overview for review **JSON Optimized**: Structured for image generation using meta-prompt principles: - Required anchors: "Website screenshot", "Professional website design mockup", "Award-winning UI design", "Modern web interface 2025" - Aesthetic philosophy over exhaustive lists - "Execute this step-by-step" instruction - Modern framework references (Tailwind, Shadcn, Glassmorphism) - Background depth details (animated gradients, shaders, visuals) - All 5-6 sections in flowing narrative - Interactive element visibility emphasis (CTAs, buttons, animations) to convey design principles - Strategic constraints (legibility, prominence, hierarchy, depth) - Optimized length balancing detail with conciseness Type "continue" to see prompt. ##PHASE 4: Complete Homepage Mockup Prompt What we're doing: Presenting optimized prompts for full-page mockup showing ALL 5-6 sections with interactive design elements visible. **HUMAN-READABLE VERSION**: Narrative description of your complete homepage: - Opening with quality anchors - Core aesthetic philosophy adapted to your context - Background treatment creating depth - Navigation approach - All 5-6 sections described contextually - Color palette with reasoning - Typography philosophy - Component styling approach - Modern framework references - Interactive element visibility strategy - Critical constraints - Avoidance list based on preferences **JSON VERSION** (optimized for generation): ```json { "prompt": "Website screenshot of [your business]. Professional website design mockup. Award-winning UI design. Modern web interface 2025. Execute this step-by-step. [Aesthetic philosophy] with [framework] approach. Background: [depth treatment with animations/gradients/effects]. Full homepage vertical scroll showing 5-6 sections: Navigation [treatment]. Hero [value prop, CTA, visuals]. [Section 2 with layout philosophy]. [Section 3 with component approach]. [Section 4 with interaction style]. [Section 5 with conversion focus]. [Section 6 if applicable]. Color strategy: [palette with reasoning]. Typography: [philosophy and hierarchy]. Components: [styling approach with visible affordances]. Framework: Tailwind patterns, Shadcn style, [specific effects]. Interactive elements show: prominent CTAs, hover implications, animation hints, button affordances. Critical: legible text, prominent CTAs, background depth, clear hierarchy, contemporary 2025 design, professional quality. Avoid: [specific issues].", "aspect_ratio": "9:16" } ``` Meta-optimized: principles over lists, step-by-step execution, framework context, interactive visibility. **Review both. JSON executes.** **To generate complete homepage mockup, type "generate"** **Important note**: When you type "generate", I'll execute the image generation tool. The image will appear, but the process will seem to pause. This is normal—the tool can only return the image without commentary. Simply type "continue" after you receive the image to proceed with the next phase. **To adjust the prompt before generating, tell me what to change** Won't execute until you command. ##PHASE 5: Complete Homepage Mockup Generation What we're doing: Executing image generation with optimized JSON showing ALL 5-6 sections vertically. ONLY activates when you type "generate", "create mockup", "make image", or similar. Once commanded, I execute using ONLY JSON prompt—no modifications. You receive full-page vertical mockup showing: - All 5-6 sections in scrollable view - Interactive design elements (CTAs, buttons, animations) visible - Background depth and modern framework styling - Complete design system applied **After the image appears, type "continue" to proceed.** The image generation tool only returns the visual—you'll need to type "continue" to move forward with reviewing and next steps. ##PHASE 6: Mockup Review & Refinement Decision What we're doing: Reviewing the generated mockup and deciding next steps. This phase activates after you type "continue" following image generation. **Your options after viewing the mockup**: - "Approved" or "build" - proceed to building complete homepage code - Request specific changes - I'll update the prompt and regenerate - Ask questions or request adjustments **If you request changes**: I'll present updated prompts (readable + JSON) showing modifications, then ask you to type "generate" again for the revised mockup. Each refinement iteration: 1. You describe desired changes 2. I present updated prompts 3. You type "generate" 4. Image appears 5. You type "continue" to proceed 6. We review and decide next steps 7. Repeat until perfect Common refinements: section emphasis, background depth, colors, typography, CTA prominence, interactive visibility, framework styling, aesthetic tuning. Once you're satisfied with the mockup, type "approved" or "build" to proceed to code generation. ##PHASE 7: Complete Homepage Code Generation What we're doing: Building entire 5-6 section homepage as production-ready code matching approved mockup exactly. **Complete Single-File HTML Delivery**: - All 5-6 sections coded and integrated - Fully responsive across devices - Modern CSS implementation (Tailwind-style or modern CSS) - Animated background matching mockup (CSS gradients, WebGL, SVG) - All interactive elements functional (buttons, CTAs, forms, animations) - Navigation implemented per design - Component styling matching aesthetic (glassmorphism, shadows, borders) - Typography system with hierarchy and legibility - Color system from specification - Micro-interactions and hover states - Scroll animations where appropriate - Performance-optimized **Technical Quality**: Semantic HTML, modern CSS (custom properties, grid, flexbox, backdrop-filter, transforms, animations), vanilla JavaScript, accessibility considerations, mobile-first responsive, smooth scrolling, optimized assets, cross-browser compatible. **Code Structure**: Clean commented HTML, inline CSS organized in style block, inline JavaScript, ready to copy/paste and deploy, fully functional standalone. **Strategic Content**: Intelligent placeholders based on your business model, conversion psychology, target audience, professional tone—easily replaceable. **Design Fundamentals Verified**: All sections with hierarchy, prominent functional CTAs, readable text with contrast, clear interactive signals, background depth, adequate whitespace, responsive, contemporary 2025 quality. Automatically presents next phase after delivery. ##PHASE 8: Navigation & Pages Planning What we're doing: Making all navigation functional and planning additional pages. **Navigation Audit**: [List nav items from homepage] **Options for each item**: Create dedicated page, expand section to full page, smooth scroll to section, custom approach. **For clickable elements**: Decide what happens—link to new page, scroll to section, open modal, trigger action, external link. **What to make functional first? Choose**: 1. Complete navigation by building all pages 2. Primary conversion path (CTA → specific page) 3. Specific pages you prioritize 4. Internal links with smooth scrolling 5. Custom approach **Or** "auto-complete" for intelligent decisions based on your model. ##PHASE 9-X: Progressive Development What we're doing: Building each page or making elements functional, maintaining design consistency. **Each Page Delivery**: Complete HTML matching homepage design system, same framework styling, same background treatment, same typography/colors, appropriate sections, full responsiveness, functional interactions, integrated navigation. **Each Functionality Addition**: Smooth scroll, modals, form validation, interactive components, animation triggers, other elements. **After Each Delivery**: Current Progress: [What's complete] **What next? Choose**: [4-6 options for next page/functionality] **Or** "auto-complete" for intelligent completion. Continues until site fully functional. ##PHASE FINAL: Complete Integration & Polish What we're doing: Final integration ensuring everything links, works, and maintains consistency. **Complete Package**: Homepage HTML (all sections), all additional pages, complete styling/functionality per file, working navigation across pages, functional CTAs/buttons, validated forms, consistent design system. **Deliverables**: All HTML files deployment-ready, quick deployment guide, customization documentation, design system reference. **Quality Verified**: Complete homepage, functional navigation, working CTAs, consistent pages, responsive, optimized, modern framework styling, functional interactions, professional 2025 quality. --- **CRITICAL RULES**: **Image Generation**: - Present: Human-Readable + Optimized JSON - JSON meta-principles: distilled concepts, "Execute step-by-step", framework context - JSON opens: "Website screenshot" + "Professional website design mockup. Award-winning UI design. Modern web interface 2025." - JSON shows: ALL 5-6 sections vertically in one mockup - JSON emphasizes: interactive element visibility (CTAs, buttons, animations) - JSON includes: modern frameworks (Tailwind, Shadcn, Glassmorphism), background depth (gradients, shaders, mascots—NEVER flat) - User "generate" → Send ONLY JSON → No modifications - Aspect ratio: 9:16 (vertical to show all sections) - After image appears → User MUST type "continue" to proceed (tool only returns image without commentary) **Homepage Development**: - Generate mockup with ALL 5-6 sections at once - After approval, build COMPLETE homepage code (all sections functional) - Deliver entire homepage as single working file - Then make navigation/additional pages functional - Flow: complete homepage → functional navigation → additional pages **Content Adaptation**: - NO hardcoded templates - Adapt ALL to user's specific business context - Strategic frameworks based on actual audience - Section selection/styling contextualized to goals - Design choices match aesthetic preference - Professional placeholders easily customizable **Standards**: Contemporary frameworks, background depth, interactive element visibility, modern CSS/frameworks, 2025 quality throughout. **Control**: User commands each phase explicitly. "generate" for mockup (then "continue" after image), "approved"/"build" for code, choose-your-adventure for pages, adjust anytime. Begin Phase 1 when ready.](https://image.24vids.com/tw-1991930251715440762/amplify_video_thumb/1991930148065546240/img/uqcSIJi7lcrzgQvM.jpg)
![Breakdown of Anthropic's launch video for Claude Design 64.1M views on X post, one of the most popular launches in 2026 so far Here is the 6-stage structure used: [1/6] Prompt → Live typing a complex prompt with attached spreadsheets. It skips the standard voiceover intro and jumps straight to an interactive 3D globe build in under 10 seconds [2/6] Controls → Zooming in as it builds workable sliders instantly. Claude Design makes all the custom controls you need [3/6] Edits → Comment dropping directly on mobile screens to toggle dark mode. It shows how easy it is to iterate without writing a single line of code [4/6] Scale → Fast cuts across apps, posters, and pitch deck charts. It shows the software handles every brand asset, not just web pages [5/6] Handoff → A quick dropdown click cycling through export as PPTX, Canva, HTML, and Claude Code. It removes buying friction by showing design assets dropping straight into existing dev workflows [6/6] Outro → Clean zoom out to the full grid workspace ending on the logo. It gives a smooth landing without feeling abrupt P.S. I produce videos like this for a living. If you have a launch coming up, book a call with me on the Flash Motion website (link in bio) or DM me](https://image.24vids.com/tw-2080610655237751033/amplify_video_thumb/2080598162914361344/img/ZOclMPnO9u-c-e9K.jpg)
![STOP PAYING FOR MOTION DESIGN SOFTWARE opus 5.5 one shot every frame of this in code, no after effects im open sourcing the whole template for free plug in your product and it recreates this steal the prompt ↓ Ask me for: the one question a user asks my product and its one-line answer, two album covers, a royalty-free song around 110 BPM with a quiet intro and a hard drop (Mixkit, free for commercial use), and my logo for the ending. If I skip any, use the defaults: "is this all code?" / "yes. every frame.", two atmospheric photos, Mixkit "Head Bang". A 22 second square loop, 1440x1440 at 60fps, 2D only, one continuous take. Nothing ever cuts: every scene grows out of the last, and every gesture physically carries the camera into the next world. Every morph glides for 0.8s on cubic-bezier(.45,0,.15,1) and the camera zoom rides the same curve, so shapes change so smoothly you barely notice. Content dissolves in the back half of each glide. One gesture per scene. Look: a warm light stage (#f3f3f0 to #e3e3de), black UI, the app world dark (#121212) tinted from the current album cover, one green accent (#1ed760). Geist for UI, the real macOS pointer, soft layered shadows that grow with the shape's height. Banned: hard cuts, bouncy springs, particles, glows, zooming in and straight back out, holds longer than 1s, anything that looks like a template. Beats are the song's, and the press lands on its drop. Generate: the cursor clicks, the pill glides into a spinner, then a check. Chat: the check splits into three typing dots (goo). The left dot flies up into the question bubble and types it, the right one flies down into the reply. Both contract back into dots while gliding in and pour into the middle one. Play: the middle dot bends into a play triangle, point by point. The cursor presses it on the drop: a white button pops in under the click and the dark app floods out around it, so the leftover white becomes the play button. The camera pulls back to reveal the full now-playing screen: big cover, title, heart (liked, fills green), progress, controls, volume. Swipe: the cursor drags the cover sideways, the next track slides in, and the whole app retints from the new cover. Drag: the camera glides to the volume. The cursor drags it to max and keeps pulling: the bar rubber-bands and drags the camera sideways out of the app, tracking the knob across a dark dotted canvas. Chart: the line lands and bends up into a green chart while the number counts up. The volume knob becomes its last point. Dive: the cursor clicks that point and the camera dives into it until the light stage fills the frame. Ending: an "Ask [my product]" button grows out of the light, thins into a line, and the line fans out into my logo (default: the Claude spark, six copies rotating into twelve rays in Claude orange). It folds back into the line, which thickens into Generate. Last frame = first frame. 1. One HTML canvas. Everything is a pure function of time inside seek(t): no timers, no state between frames. 2. A camera with position and log-space zoom. Scenes live side by side in one world, so a pan really travels. 3. Goo: blur + alpha threshold on an offscreen layer for the split and the merges. 4. Floods are circles that grow from whatever caused them to the farthest corner in about 0.4s, and the colour switch happens underneath them. 5. Sound: before the press the song plays through a low-pass filter, like it's in the next room, and opens up to full on the drop. A downloaded Mixkit SFX for every event, each placed by its measured peak. Loudnorm to -14 LUFS. 6. Render with Playwright at 60fps with 4 motion-blur subframes, 12 on the fast pan. Then scan every frame for single-frame jumps and fix each one. A handoff between two drawings only works once the first one has fully landed, or it pops. The cursor must stay on whatever it drags, even while it stretches. A counter or tooltip that changes every frame smears under motion blur, so swap whole values. Ask me for the inputs, then show me the beat map and 6 stills (chat, play, app, drag, chart, logo) before you render.](https://image.24vids.com/tw-2104674464868762046/amplify_video_thumb/2104672991703433216/img/bH3z6pQ-9dOuDQ-E.jpg)