If you design or vibe code, save this list.... - Kokonut UI; animated React components - Motion Sites; website and animation inspiration - Motion .dev; web animation - Anime .js; JavaScript animation - Particles Casberry; interactive particles and WebGL effects Useful for both design and build.show more

The best UI components ready to use, save this... 👇 — Interactive UI effects & animations — Smooth transitions and micro-interactions — 170+ customizable React components — Animated components with beautiful motion — Clean, accessible React components Interactive components with polished animations Fluid motion powered by physics — 1,000+ AI-ready UI components — Stunning components for AI products What Did I Miss?show more

Useful sites for designers you probably haven't seen. Save... this 👇 - - live, tweakable UI blocks - - invite-only designer community - - 800+ real sites for your coding agent - - AI prompts for animated websites - - motion-first React components - - one-file UI kit for AI products - - apps & tools built by designers - - web, UI, app icon & OG inspiration - - turn screenshots into showreels What am I missing?show more

I stopped collecting random inspo. These are the only... UI + vibecoding resources I keep opening. 1. EvilCharts — animated React charts for dashboards 2. Rewamp UI — free open-source components, blocks, and landing pages 3. Refero — real product UI patterns and screens for reference 4. Bencho — AI product UI components for faster builds 5. Inspora — design inspiration for modern product UI 6. Neuform — design-to-code resources for AI UI work 7. Open Design — DESIGN.md resources so AI builds with clearer UI rules Save this before your next build 👀show more

Found a website with 2,000+ hand-picked tools and resources... for designers. It has everything from design inspiration, UI resources, mockups, icons, AI tools, no-code tools, design systems, productivity tools, and more. Really useful when you don’t want to waste hours searching across different sites. Save it for latershow more

5 cool sites for web developers. - Open source... TypeScript AI Agents - Full-stack hosting for PHP, JavaScript, Python, Go... - Convert files to any format & API - Easy to use API client - Design and animation to codeshow more

We're building After Effects for the web. Vector animation... that goes from design to production, built on Lottie, the industry-standard for product animation. Describe what you want and Motion Copilot animates it, or generate Lottie straight from Codex/Claude with our MCP. All in the browser. This is Lottie Creator 2.0. The biggest update we've ever shipped.show more

Hailuo MiniMax (official) MiniMax Design (H3) H3 A prototype... motion-graphics landing page for ice cream, built to test just how far H3 can push UI animation, typography, transitions, hover interactions, and product motion. I tried creating similar effects manually in Adobe After Effects but this version is 100% generated with H3. The model handles these complex motion-design elements incredibly well, and the results are STUNNING - Animated Shape Layers - Kinetic Typography - Cursor Hover Update - Bounce Effects - Wiggle Effects - Live Background - Micro Text Renders - Ease in Ease out Keyframes Prompt Belowshow more

Pro tip for Vibe Coding: just knowing the "terms"... behind UI components can 100x your frontend results This website shows you ALL the typical UI components found on websites with examples and inspiration Learn it, screenshot it, and vibe codeshow more

if you build animated interfaces for the web, this... is essential reading a clear, practical look at the main thread and the real cost of animation in javascript and css the difference isn't just measurable, it's something you feel ↓ 🔗show more

You can use interactive artwork created by Rive artists,... like this character, and extend it with Scripting to build a full game. This makes it possible to iterate on code, design, and animation all in one collaborative editor.show more

Three OpenAI dots built this entire motion design project... in 15 minutes for $30. - One builds the opening scenes. - Another handles animation curves and camera moves. - The third creates visual styles and 3D titles. Built with After Effects + Higgsfield. This is insane.show more

Opus 5.5 just f*cking killed the jobs of motion... designers... Claude Code + Remotion = your own motion design studio give it a brief, your assets, and a reference build the scenes as editable React code 01 direct the scene layout, typography, colors, and reusable components 02 make it move timing, easing, keyframes, transitions, and layered animation 03 polish the result preview the frames, fix the spacing, adjust the pacing, and render the MP4 the clever part: your video lives in code change the headline, fonts, format, or motion curve → render again the repo: ▸ start a project: npx create-video@latest add the official Remotion skills: npx skills add remotion-dev/skills skills for coding agents: ▸ the loop: brief → storyboard → assets → layout → animate → preview → refine → render save this, then read the full guide for Opus 5.5 Motion Engineering ↓show more

This 3D "Fern-Style" animation is made 100% With AI... - Ai sound effects - Ai motion -Ai scene design We made a tool that does everything for you and generates an entire documentary. You only insert your script and click "generate" Might give access to some people🤫show more

it's absolutely gold ex-Figma Design Lead dropped a list... of 15 github repos that turn Opus 5.5 into a full motion design studio SHIP A LAUNCH VIDEO 01. product-launch-motion: -> point it at your product, get script, voiceover, camera moves and film grade 02. motion-graphics-skills: -> 15 skills for launch videos, animated charts and reels, zero After Effects 03. claude-motion-design: -> every cut lands on the beat, its demo film took 5 iterations on Opus 5.5 EDIT YOUR OWN FOOTAGE 04. hyperframes-student-kit: -> drop in your footage, it cuts dead air and mistakes, then adds motion graphics 05. motion-graphics: -> motion B-roll timed to your words, and it cuts you out of the background MAKE ANIMATED SHORTS 06. animate: -> explainers in 7 styles, cut paper to riso to pixel art, storyboard first 07. claude-motion: -> teaches Claude taste, makes it check its own frames, adds a sound engine 08. claude-remotion-skill: -> fixes the flat fades and stiff motion most AI videos ship with ANIMATE YOUR SITE 09. motion: -> buttons, cards and page transitions for React, Vue and plain JS 10. motion-dev-animations-skill: -> one sentence and Claude Code animates your site OFFICIAL BUILDING BLOCKS 11. hyperframes: -> your agent writes HTML, HyperFrames renders it as video 12. remotion: -> turn an idea into a video straight from your coding agent 13. remotion skills: -> Remotion's official best practices for Claude Code, Codex and Cursor 14. gsap-skills: -> official GSAP skills, the engine under the launch and editing kits above 15. motion-design-skill by LottieFiles: -> Disney's 12 animation principles, rewritten for AI agents the map picks your first install in 3 questionsshow more

Your design bookmarks could use a few new faces—start... with these 9 ↓ - : UI blocks you can tweak live - : an invite-only space for designers - : 800+ real websites for your coding agent to reference - : AI prompts for websites with animation - : React components with motion at their core - : a single-file UI kit for AI products - : discover tools made by fellow designers - : inspiration for websites, interfaces, app icons & OG images - : turn static screenshots into showreels Which lesser-known site would you add?show more

WTF Broooo??....... Someone literally made Pinterest but for UI... blocks. 🤯 A stunning collection of interactive UI blocks you can explore, play around with, and use in in your own projects. If you're a developer, designer, AI coder, or vibe coder, this is definitely gonna be a goldmine for UI inspiration :) Follow me for more amazing AI, Coding & Web Dev insights 💎show more

Happy Holidays! Give yourself an extra little gift today... and grab one of this year's free project samples🎁 Get animated with the A-COM Animation Sample, kick off your Sports Motion Broadcast Design learning or set sail on game development with the Parrot Game Sample🧵show more

🤗Another breakdown from an older project made for Lands... of Noara . It was one of my first 2D VFX on a shot and a great project to direct and work on. I also made the motion design. Animated by the fantastic Makadam #blender #animation #3D #p2designshow more

this is pure f*cking treasure 20 GitHub repos to... build your own motion design studio with Opus 5.5 storyboards. typography. assets. character states. keyframes. 3D. rendering here’s the stack from the first sketch to the final frame DESIGN + STORYBOARD 01 Penpot → layouts and reusable components 02 Excalidraw → sketch the storyboard 03 Fontsource → self-host your fonts 04 Lucide → consistent SVG icons ASSETS + CHARACTER ANIMATION 05 SVGO → clean the vector assets 06 sharp → resize, crop, and prepare images 07 Lottie-web → play vector animations 08 Rive Web → control character states TIMELINES + CHOREOGRAPHY 09 Motion → springs and layout transitions 10 GSAP → direct complex timelines 11 Anime.js → choreograph SVG and objects 12 Theatre.js → tune motion visually 3D + VISUAL POLISH 13 Three.js → build the 3D scene 14 React Three Fiber → compose 3D in React 15 Drei → cameras, lighting, and staging 16 Postprocessing → bloom and color grading PRODUCTION + EXPORT 17 Remotion → compose and render the video 18 Remotion Skills → give Claude Code the production playbook 19 FFmpeg → encode and package the output 20 Mediabunny → build browser media pipelines start with Remotion + its skills choose the assets, motion engine, and 3D modules your project needs the clever part: the composition lives in code change the copy, colors, timing, or format → render the next version the loop: brief → storyboard → assets → layout → animate → add depth → preview → refine → render save this, then read the full guide for Opus 5.5 Motion Engineering ↓show more

Stop editing timelines. Start writing prompts. Replit Animation lets... you create animated videos inside Replit using code. Replit ⠕ #replitanimation It generates TypeScript behind the scenes with modern animation libraries, turning your ideas into fully rendered mp4 videos. Plug in your existing design systems, typography, tokens, and production components to create videos that match your product perfectly. Video as code changes the workflow. Your components become reusable animation blocks. Update the code, regenerate the video, ship again. From automated changelog videos to polished feature releases, video creation becomes a scalable pipeline. Here is an example of a video I generated with Replit Animation. Export in your preferred resolution and frame rate or host it online with a shareable URL. Mention video in your first prompt or choose Animation under App mode to activate it. Start creating:show more