Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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.

Manixh02's profile picture

Manish Kumar

8,425 subscribers

24,097 Aufrufe • vor 1 Monat •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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?
0:19

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?

Nero

47,719 Aufrufe • vor 1 Monat

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?
0:19

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?

Tran Mau Tri Tam ✪

30,480 Aufrufe • vor 1 Monat

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 👀
0:19

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 👀

Hey Detya

50,001 Aufrufe • vor 22 Tagen

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 later
0:15

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 later

𝐍𝐨𝐚𝐡

16,715 Aufrufe • vor 4 Monaten

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 code
0:12

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 code

WebDeveloperMentor

60,590 Aufrufe • vor 8 Monaten

If you use AI, this is what you need 1. — Better and cheaper than lovable 2. — Motion design inspiration 3. — Landing page references 4. — Premium Figma designs 5. — App & web icons 6. — Fonts behind iconic logos 7. — Design community 8. — Award-winning websites 9. — Mobile UI animations 10. — Footer inspiration save this for later
0:12

If you use AI, this is what you need 1. — Better and cheaper than lovable 2. — Motion design inspiration 3. — Landing page references 4. — Premium Figma designs 5. — App & web icons 6. — Fonts behind iconic logos 7. — Design community 8. — Award-winning websites 9. — Mobile UI animations 10. — Footer inspiration save this for later

Bardhyl Bytyqi

48,196 Aufrufe • vor 1 Tag

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.
0:10

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.

Nattu

20,973 Aufrufe • vor 3 Monaten

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 Below
0:15

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 Below

Shams

35,225 Aufrufe • vor 1 Monat

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 code
0:15

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 code

Melvyn • Builder

160,836 Aufrufe • vor 7 Monaten

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 ↓ 🔗
0:15

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 ↓ 🔗

jhey ʕ•ᴥ•ʔ

46,709 Aufrufe • vor 1 Monat

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.
0:19

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.

Rive

49,606 Aufrufe • vor 11 Monaten

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.
0:20

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.

Higgsfield AI 🧩

69,648 Aufrufe • vor 22 Tagen

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 ↓
0:15

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 ↓

beamnxw ./

31,498 Aufrufe • vor 8 Tagen

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🤫
0:13

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🤫

North

23,803 Aufrufe • vor 6 Monaten

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 questions
0:15

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 questions

Mnimiy

103,707 Aufrufe • vor 10 Tagen

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?
0:13

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?

Wasim

30,095 Aufrufe • vor 21 Tagen

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 💎
0:17

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 💎

Ram Maheshwari

32,497 Aufrufe • vor 1 Monat

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🧵
0:18

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🧵

Unreal Engine

14,944 Aufrufe • vor 10 Monaten

🤗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 #p2design
0:11

🤗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 #p2design

Pierrick Picaut

42,631 Aufrufe • vor 1 Jahr

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 ↓
0:20

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 ↓

beamnxw ./

37,629 Aufrufe • vor 7 Tagen