Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

25 loading buttons, open-source animated motion collection 13 webgl, svg/canvas/css, responsive, replayable, zero dependencies comment "LOADER" and i'll send you the npm + react native package

jaimintf's profile picture

jaimin

4,811 subscribers

63,062 Aufrufe • vor 2 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

38 Kommentare

Profilbild von Narsi
Narsivor 2 Monaten

LOADER

Profilbild von Nikhil Akki
Nikhil Akkivor 2 Monaten

LOADER

Profilbild von kumar
kumarvor 2 Monaten

We dont have to build something from scratch @itskeyans 😅

Profilbild von Appllama
Appllamavor 2 Monaten

LOADER

Profilbild von Sınavlar Cebimde
Sınavlar Cebimdevor 2 Monaten

LOADER

Profilbild von Sınavlar Cebimde
Sınavlar Cebimdevor 2 Monaten

I waiting thank u so much

Profilbild von Nikita Gurbatov
Nikita Gurbatovvor 2 Monaten

LOADER

Profilbild von Devlooper
Devloopervor 2 Monaten

LOADER

Profilbild von Ezekiel Olayiwola | Product Designer
Ezekiel Olayiwola | Product Designervor 2 Monaten

LOADER

Profilbild von shashwat
shashwatvor 2 Monaten

LOADER

Profilbild von Omniscient57
Omniscient57vor 2 Monaten

Loader

Profilbild von Ashish Soni
Ashish Sonivor 2 Monaten

LOADER

Profilbild von Luka Radisic
Luka Radisicvor 2 Monaten

LOADER

Profilbild von Malhar Ujawane
Malhar Ujawanevor 2 Monaten

LOADER

Profilbild von 薄荷清尘
薄荷清尘vor 2 Monaten

LOADER Thanks

Profilbild von F A X I I I 7
F A X I I I 7vor 2 Monaten

LOADER

Profilbild von RiyazAhamad 🌿 | Solving problems using Software
RiyazAhamad 🌿 | Solving problems using Softwarevor 2 Monaten

Loader

Profilbild von Aleey | Thumbnail Strategist
Aleey | Thumbnail Strategistvor 2 Monaten

Great work

Profilbild von jaimin
jaiminvor 2 Monaten

thanks!

Profilbild von Jonatan
Jonatanvor 2 Monaten

LOADER

Profilbild von Divin Prince
Divin Princevor 2 Monaten

These looks really nice

Profilbild von jaimin
jaiminvor 2 Monaten

appreciate it! it's all the taste from @appllamaio

Profilbild von Nazeekial
Nazeekialvor 2 Monaten

LOADER

Profilbild von drew
drewvor 2 Monaten

LOADER

Profilbild von z 👋🏻
z 👋🏻vor 2 Monaten

gorgeous! def wanna check this out! LOADER

Profilbild von jaimin
jaiminvor 2 Monaten

lfgg 🔥🔥

Profilbild von Bilal Dhouib
Bilal Dhouibvor 2 Monaten

LOADER

Profilbild von Sanket
Sanketvor 2 Monaten

LOADER

Profilbild von Michael Bany🍎
Michael Bany🍎vor 2 Monaten

Very nice 👍

Profilbild von jaimin
jaiminvor 2 Monaten

thanks g!

Profilbild von Xylire
Xylirevor 2 Monaten

LOADER

Profilbild von Boudou 95
Boudou 95vor 2 Monaten

LOADER

Profilbild von Roman
Romanvor 2 Monaten

LOADER

Profilbild von Filip Sekan
Filip Sekanvor 2 Monaten

Loader

Profilbild von Joachim Wernersson 🚀
Joachim Wernersson 🚀vor 2 Monaten

LOADER

Profilbild von 40Hz
40Hzvor 2 Monaten

LOADER

Profilbild von Stuti Pareek
Stuti Pareekvor 2 Monaten

Loader

Profilbild von X
Xvor 2 Monaten

loader

Ähnliche Videos

Open-source and free apps for coders - 5000+ Open-source SVG icons - Open-source CSS animated buttons - 60 components, 2,671 examples. - Free motion effects - Open-source modern UI components
0:37

Open-source and free apps for coders - 5000+ Open-source SVG icons - Open-source CSS animated buttons - 60 components, 2,671 examples. - Free motion effects - Open-source modern UI components

Csaba Kissi

64,699 Aufrufe • vor 3 Monaten

Open-source and free apps for coders - 7000+ free SVG icons - Open-source collection of CSS cursors - Turns your Chrome into stable commands for the AI agents - Free design inspiration from top sites - Open-source animated UI Components for React
0:47

Open-source and free apps for coders - 7000+ free SVG icons - Open-source collection of CSS cursors - Turns your Chrome into stable commands for the AI agents - Free design inspiration from top sites - Open-source animated UI Components for React

Csaba Kissi

24,706 Aufrufe • vor 3 Monaten

finally liquid glass web is here and it's open source. real WebGL refraction, chromatic aberration, liquid motion not usual backdrop-filter css hack. playground at code at MIT so do whatever you want with it #LiquidGlass #OpenSource #ReactJS #WebGL #UIComponents #FrontendDevelopment #CSS #JavaScript #WebDev #UI #UX #React #ComponentLibrary #OpenSourceSoftware #Frontend
0:20

finally liquid glass web is here and it's open source. real WebGL refraction, chromatic aberration, liquid motion not usual backdrop-filter css hack. playground at code at MIT so do whatever you want with it #LiquidGlass #OpenSource #ReactJS #WebGL #UIComponents #FrontendDevelopment #CSS #JavaScript #WebDev #UI #UX #React #ComponentLibrary #OpenSourceSoftware #Frontend

Tirth Parmar

65,100 Aufrufe • vor 3 Monaten

Some React devs assume you need to npm install a library to get tooltips. Not true! For icon buttons, use a combo of the `title` attribute and screenreader text with Tailwind CSS' sr-only class. Gives you a native tooltip for the label while improving a11y
0:23

Some React devs assume you need to npm install a library to get tooltips. Not true! For icon buttons, use a combo of the `title` attribute and screenreader text with Tailwind CSS' sr-only class. Gives you a native tooltip for the label while improving a11y

Ben Holmes

98,116 Aufrufe • vor 1 Jahr

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴
0:27

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴

daniel petho

188,966 Aufrufe • vor 1 Jahr

ITSHOVER is redefining UI design with motion-first animated icons built for modern applications. Instead of lifeless SVGs, every icon is designed to react, engage, and enhance user experience through meaningful animation. Built for React, Next.js, Tailwind CSS, and modern web stacks. Why developers are paying attention • Motion-first icon library • Beautiful animated interactions • React & Next.js ready • Tailwind CSS friendly • Open source and fully customizable • Designed for modern products and SaaS applications • 2,200+ GitHub stars • 100,000+ biweekly visits The future of interfaces isn't static. It's interactive. It's responsive. It's ITSHOVER. Website: GitHub: Early adopters always win first. #ITSHOVER #OpenSource #ReactJS #NextJS #WebDevelopment #UIUX #Frontend #TailwindCSS #DesignSystems #AnimatedIcons #BuildInPublic #Developers #GitHub #WebDesign #SaaS #Startup #IndieHackers
0:28

ITSHOVER is redefining UI design with motion-first animated icons built for modern applications. Instead of lifeless SVGs, every icon is designed to react, engage, and enhance user experience through meaningful animation. Built for React, Next.js, Tailwind CSS, and modern web stacks. Why developers are paying attention • Motion-first icon library • Beautiful animated interactions • React & Next.js ready • Tailwind CSS friendly • Open source and fully customizable • Designed for modern products and SaaS applications • 2,200+ GitHub stars • 100,000+ biweekly visits The future of interfaces isn't static. It's interactive. It's responsive. It's ITSHOVER. Website: GitHub: Early adopters always win first. #ITSHOVER #OpenSource #ReactJS #NextJS #WebDevelopment #UIUX #Frontend #TailwindCSS #DesignSystems #AnimatedIcons #BuildInPublic #Developers #GitHub #WebDesign #SaaS #Startup #IndieHackers

👑 KING NEXT 100X

32,340 Aufrufe • vor 4 Monaten

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 into Claude or Cursor, get the component live. -Personal and client use, full source included, new drops weekly. 2. shadcn/ui ( — the gold standard for copy-paste React 3. Aceternity UI ( — 200+ animated React/Tailwind 4. Magic UI ( — drop-in animated components 5. Motion Primitives ( — advanced UI interactions 6. Uiverse ( — thousands of open-source elements 7. — component registry that plugs into agents via MCP 8. UIAble ( — expands the shadcn ecosystem 9. mapcn ( — map components for React 10. MicroKit UI ( — micro-interactions for buttons and inputs 11. Liquid Glass ( — glass refraction components 12. Kinetics ( — 150+ motion effects with code 13. Theatre.js ( — expressive web animation 14. Anime.js ( — lightweight DOM animation 15. Spline ( — 3D in the browser, exports to React 16. Unicorn Studio ( — interactive web effects 17. Component Gallery ( — 2,600+ examples of the same element solved 18. Navbar Gallery ( — hundreds of navigations 19. CSS Text Effects ( 20. 3Dicons ( — open-source 3D icons
0:45

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 into Claude or Cursor, get the component live. -Personal and client use, full source included, new drops weekly. 2. shadcn/ui ( — the gold standard for copy-paste React 3. Aceternity UI ( — 200+ animated React/Tailwind 4. Magic UI ( — drop-in animated components 5. Motion Primitives ( — advanced UI interactions 6. Uiverse ( — thousands of open-source elements 7. — component registry that plugs into agents via MCP 8. UIAble ( — expands the shadcn ecosystem 9. mapcn ( — map components for React 10. MicroKit UI ( — micro-interactions for buttons and inputs 11. Liquid Glass ( — glass refraction components 12. Kinetics ( — 150+ motion effects with code 13. Theatre.js ( — expressive web animation 14. Anime.js ( — lightweight DOM animation 15. Spline ( — 3D in the browser, exports to React 16. Unicorn Studio ( — interactive web effects 17. Component Gallery ( — 2,600+ examples of the same element solved 18. Navbar Gallery ( — hundreds of navigations 19. CSS Text Effects ( 20. 3Dicons ( — open-source 3D icons

Himanshu Hingorani

71,973 Aufrufe • vor 22 Tagen

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic
0:47

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

CodeHagen

241,680 Aufrufe • vor 1 Jahr

Every serious vibe coder should have bookmarked it. 25 vibe coding resources to keep yourself ahead of the competition. 1. - 600+ award-winning prompts + full source code for 3D and scroll-driven websites. - 100+ 3D scenes, 200+ interactive gradients, 200+ UI components. - Copy the prompt, paste into Claude, Cursor or Lovable, launch live. 2. Minimal Gallery ( - curated high-end sites to feed your agent 3. Godly ( - hand-picked sites with serious craft 4. Refero Styles ( - 2,000+ real product styles with typography 5. Component Gallery ( - 2,600+ examples of how top design systems solve the same element 6. Mobbin ( - real app flows from real products 7. DESIGNmd ( - design systems as markdown your agent can read 8. VibePrompt ( - ready-made prompts for dashboards and landing pages 9. ( - component registry that plugs into agents via MCP 10. Kinetics ( - 150+ motion effects with React code and prompts 11. shadcn/ui ( - still the gold standard for clean, reusable UI 12. Aceternity UI ( - 200+ animated React/Tailwind components 13. Magic UI ( - beautifully designed components for modern web apps 14. Motion Primitives ( - ready-to-use animation and interaction components 15. Uiverse ( - community-built UI elements and interactive components 16. Shadcnblocks ( - full blocks, not just buttons 17. mapcn ( - map components, markers, routes, popups 18. Awwwards ( - the sites that actually won 19. Liquid Glass ( - glass refraction components and effects 20. CSS Text Effects ( - creative CSS text animations and effects 21. Circle Loaders ( - creative loading animations and loaders 22. Gradient Buttons ( - gradient button styles and effects 23. Shadertoy ( - shaders to study and remix 24. 3Dicons ( - a library of free 3D icons for modern interfaces 25. Anime.js ( - lightweight JavaScript animation library for the web If you're building with AI, this list will save you hours. Save it. 🔖
0:21

Every serious vibe coder should have bookmarked it. 25 vibe coding resources to keep yourself ahead of the competition. 1. - 600+ award-winning prompts + full source code for 3D and scroll-driven websites. - 100+ 3D scenes, 200+ interactive gradients, 200+ UI components. - Copy the prompt, paste into Claude, Cursor or Lovable, launch live. 2. Minimal Gallery ( - curated high-end sites to feed your agent 3. Godly ( - hand-picked sites with serious craft 4. Refero Styles ( - 2,000+ real product styles with typography 5. Component Gallery ( - 2,600+ examples of how top design systems solve the same element 6. Mobbin ( - real app flows from real products 7. DESIGNmd ( - design systems as markdown your agent can read 8. VibePrompt ( - ready-made prompts for dashboards and landing pages 9. ( - component registry that plugs into agents via MCP 10. Kinetics ( - 150+ motion effects with React code and prompts 11. shadcn/ui ( - still the gold standard for clean, reusable UI 12. Aceternity UI ( - 200+ animated React/Tailwind components 13. Magic UI ( - beautifully designed components for modern web apps 14. Motion Primitives ( - ready-to-use animation and interaction components 15. Uiverse ( - community-built UI elements and interactive components 16. Shadcnblocks ( - full blocks, not just buttons 17. mapcn ( - map components, markers, routes, popups 18. Awwwards ( - the sites that actually won 19. Liquid Glass ( - glass refraction components and effects 20. CSS Text Effects ( - creative CSS text animations and effects 21. Circle Loaders ( - creative loading animations and loaders 22. Gradient Buttons ( - gradient button styles and effects 23. Shadertoy ( - shaders to study and remix 24. 3Dicons ( - a library of free 3D icons for modern interfaces 25. Anime.js ( - lightweight JavaScript animation library for the web If you're building with AI, this list will save you hours. Save it. 🔖

Himanshu Hingorani

23,823 Aufrufe • vor 10 Tagen

Opus 5.5 is f*cking insane for motion design 20 tools to build your own motion design studio with Opus 5.5 product demos. launch videos. animated explainers. interactive UI. build the video, tune the movement, shape the scene, add sound, ship. 01 Remotion ▸ turn React components into editable videos 02 Remotion Skills ▸ give your coding agent the official video workflow 03 Motion Canvas ▸ build animated explainers with TypeScript 04 Motion ▸ animate layouts, gestures and springs 05 GSAP ▸ coordinate complex sequences with timelines 06 Anime.js ▸ animate text, SVG and interface elements 07 Rive ▸ build characters that react to user input 08 Animations .dev ▸ study timing, easing and interaction details (paid course) 09 Carbon Motion ▸ plan movement around hierarchy and purpose 10 Easing Wizard ▸ preview curves and tune the feel of a transition 11 Google Fonts ▸ choose typefaces for titles and readable labels 12 Three.js ▸ build custom 3D scenes, lighting and cameras 13 React Three Fiber ▸ compose reusable 3D scenes in React 14 Spline ▸ design interactive 3D scenes visually 15 Poly Haven ▸ get CC0 models, materials and HDRIs 16 Blender ▸ model assets, animate objects and render scenes 17 SVGOMG ▸ clean vector assets before animating them 18 Pixabay Music ▸ find licensed music and sound effects 19 Mediabunny ▸ read, write and convert media in the browser 20 FFmpeg ▸ encode, resize and prepare the final export the loop: write the brief → choose the type → map the keyframes → build the scene → add sound → review the render → ship start with one product workflow. give every movement a job. save this, then read the full guide for Opus 5.5 Motion Engineering ↓
0:20

Opus 5.5 is f*cking insane for motion design 20 tools to build your own motion design studio with Opus 5.5 product demos. launch videos. animated explainers. interactive UI. build the video, tune the movement, shape the scene, add sound, ship. 01 Remotion ▸ turn React components into editable videos 02 Remotion Skills ▸ give your coding agent the official video workflow 03 Motion Canvas ▸ build animated explainers with TypeScript 04 Motion ▸ animate layouts, gestures and springs 05 GSAP ▸ coordinate complex sequences with timelines 06 Anime.js ▸ animate text, SVG and interface elements 07 Rive ▸ build characters that react to user input 08 Animations .dev ▸ study timing, easing and interaction details (paid course) 09 Carbon Motion ▸ plan movement around hierarchy and purpose 10 Easing Wizard ▸ preview curves and tune the feel of a transition 11 Google Fonts ▸ choose typefaces for titles and readable labels 12 Three.js ▸ build custom 3D scenes, lighting and cameras 13 React Three Fiber ▸ compose reusable 3D scenes in React 14 Spline ▸ design interactive 3D scenes visually 15 Poly Haven ▸ get CC0 models, materials and HDRIs 16 Blender ▸ model assets, animate objects and render scenes 17 SVGOMG ▸ clean vector assets before animating them 18 Pixabay Music ▸ find licensed music and sound effects 19 Mediabunny ▸ read, write and convert media in the browser 20 FFmpeg ▸ encode, resize and prepare the final export the loop: write the brief → choose the type → map the keyframes → build the scene → add sound → review the render → ship start with one product workflow. give every movement a job. save this, then read the full guide for Opus 5.5 Motion Engineering ↓

beamnxw ./

15,408 Aufrufe • vor 10 Tagen

I wanted to quickly create a short video with Opus 5.5 about the history of AI, from "Attention is all you need" to AGI. No stock footage, no image or video generators: every frame is rendered from code. This 3-minute film was made 100% in code by Claude in Claude Code: ~7,400 lines of React/TypeScript (Remotion), every image drawn in SVG and Canvas, an open-source TTS voice, and a score synthesized in Python. No stock footage. No image generators. Id say pretty cool! Tookl about 1h and 7% weekly rates.
3:00

I wanted to quickly create a short video with Opus 5.5 about the history of AI, from "Attention is all you need" to AGI. No stock footage, no image or video generators: every frame is rendered from code. This 3-minute film was made 100% in code by Claude in Claude Code: ~7,400 lines of React/TypeScript (Remotion), every image drawn in SVG and Canvas, an open-source TTS voice, and a score synthesized in Python. No stock footage. No image generators. Id say pretty cool! Tookl about 1h and 7% weekly rates.

Chubby♨️

204,765 Aufrufe • vor 26 Tagen

This isn’t a video. It’s a live, web-native prototype of work I designed for Trello. Real interface components. Real motion. Real interaction. It’s built in React and TypeScript—not rendered as a sequence of frames. I rebuilt the interface as live DOM so I could show the product work in motion, with panels, cards, and calendar elements layered independently in CSS 3D space. A custom browser timeline drives camera movement, rotation, depth, and pacing in real time, while responsive layouts and a Safari-optimized rendering path keep the experience smooth across devices. You can replay the sequence, switch views, and interact with selected parts of the interface directly on the page. It’s a front-end prototype, not a connected Trello product—but the interface, motion, and selected interactions are genuinely running in the browser. See it here: All built with OpenAI Developers Codex hosted on ChatGPT Sites.
3:38

This isn’t a video. It’s a live, web-native prototype of work I designed for Trello. Real interface components. Real motion. Real interaction. It’s built in React and TypeScript—not rendered as a sequence of frames. I rebuilt the interface as live DOM so I could show the product work in motion, with panels, cards, and calendar elements layered independently in CSS 3D space. A custom browser timeline drives camera movement, rotation, depth, and pacing in real time, while responsive layouts and a Safari-optimized rendering path keep the experience smooth across devices. You can replay the sequence, switch views, and interact with selected parts of the interface directly on the page. It’s a front-end prototype, not a connected Trello product—but the interface, motion, and selected interactions are genuinely running in the browser. See it here: All built with OpenAI Developers Codex hosted on ChatGPT Sites.

Levin Stanley

38,297 Aufrufe • vor 1 Monat

I just built a Claude skill that makes animated ads in any style (Stop Motion, Vox, Origami...) Paste any design you like. It replicates the whole style. Here's what it does: - You paste a reference image, or just a brief. - It breaks the look down into an editable spec. - It generates the on-brand stills with Nanobanana 2. - You approve the ones you like. - It animates them into stop-motion with Seedance 2.0. The frame opens empty. The cut-out pieces slide in and snap into place. Everything runs in Claude through the connector, so you never juggle models. Your only job is taste. Paste a reference, pick the shots. I'm giving the whole skill & workflow away. Comment "Skill" and I'll send it to you.
0:20

I just built a Claude skill that makes animated ads in any style (Stop Motion, Vox, Origami...) Paste any design you like. It replicates the whole style. Here's what it does: - You paste a reference image, or just a brief. - It breaks the look down into an editable spec. - It generates the on-brand stills with Nanobanana 2. - You approve the ones you like. - It animates them into stop-motion with Seedance 2.0. The frame opens empty. The cut-out pieces slide in and snap into place. Everything runs in Claude through the connector, so you never juggle models. Your only job is taste. Paste a reference, pick the shots. I'm giving the whole skill & workflow away. Comment "Skill" and I'll send it to you.

Raph Guilhem

62,282 Aufrufe • vor 3 Monaten

I've tested every vibe coding resource I could find this year. These are the 28 I actually kept, grouped by what you're stuck on. Bookmark this one 🔖 🧵👇 1. - 200+full build prompts for 3D and scroll-driven sites, each one a complete design brief rather than a component you drop in. 2. Minimal Gallery ( — curated high-end sites to feed your agent 3. Kage ( — real UI inspiration mapped straight to prompts 4. Refero Styles ( — 2,000+ real product styles with typography 5. Component Gallery ( — 2,600+ examples of how top design systems solve the same element 6. AppShot Gallery ( — real app screenshots for mobile 7. Navbar Gallery ( 8. Footer Design ( 9. CTA Gallery ( — conversion-tested forms, popups, buttons 10. 404s ( 11. DESIGNmd ( — design systems as markdown your agent can read 12 VibePrompt ( — ready-made prompts for dashboards and landing pages 13. — component registry that plugs into agents via MCP 14. Kinetics ( — 150+ motion effects with React code and prompts 15. shadcn/ui ( — still the gold standard 16. Aceternity UI ( — 200+ animated React/Tailwind 17. Magic UI ( 18. Motion Primitives ( 19. Uiverse ( 20. UIAble ( 21. mapcn ( — map components, markers, routes, popups 22. MicroKit UI ( — micro-interactions 23. Liquid Glass ( — glass refraction components 24. CSS Text Effects ( 25. Circle Loaders ( 26. Gradient Buttons ( 27. Kitbitz ( — 2,000+ hand-drawn illustrations 28. 3Dicons ( 29. Anime.js (
0:40

I've tested every vibe coding resource I could find this year. These are the 28 I actually kept, grouped by what you're stuck on. Bookmark this one 🔖 🧵👇 1. - 200+full build prompts for 3D and scroll-driven sites, each one a complete design brief rather than a component you drop in. 2. Minimal Gallery ( — curated high-end sites to feed your agent 3. Kage ( — real UI inspiration mapped straight to prompts 4. Refero Styles ( — 2,000+ real product styles with typography 5. Component Gallery ( — 2,600+ examples of how top design systems solve the same element 6. AppShot Gallery ( — real app screenshots for mobile 7. Navbar Gallery ( 8. Footer Design ( 9. CTA Gallery ( — conversion-tested forms, popups, buttons 10. 404s ( 11. DESIGNmd ( — design systems as markdown your agent can read 12 VibePrompt ( — ready-made prompts for dashboards and landing pages 13. — component registry that plugs into agents via MCP 14. Kinetics ( — 150+ motion effects with React code and prompts 15. shadcn/ui ( — still the gold standard 16. Aceternity UI ( — 200+ animated React/Tailwind 17. Magic UI ( 18. Motion Primitives ( 19. Uiverse ( 20. UIAble ( 21. mapcn ( — map components, markers, routes, popups 22. MicroKit UI ( — micro-interactions 23. Liquid Glass ( — glass refraction components 24. CSS Text Effects ( 25. Circle Loaders ( 26. Gradient Buttons ( 27. Kitbitz ( — 2,000+ hand-drawn illustrations 28. 3Dicons ( 29. Anime.js (

Himanshu Hingorani

587,222 Aufrufe • vor 25 Tagen

The official, native Seedance 2.5 is now available on Pippit AI for just $1.50 for your first month — 90% OFF. 🔥 Here’s the workflow I used: → Open Pippit AI and start with Creative Agent → Use Canvas to brainstorm and organize the creative direction → Build the story, scenes, and visual flow in Story Studio → Generate with Seedance 2.5 and refine the final result → Export the finished video in high quality What I like about the workflow is that Pippit’s Canvas brings different AI models and creative tools together in one workspace, while Seedance 2.5 can create cinematic long takes of up to 30 seconds with more precise control over timing and motion. More Affordable Seedance 2.5 Generation: For Seedance 2.5 at 720P, Pippit AI offers a promotional price of as low as $0.035/second, compared with $0.079/second on other tools. Try Seedance 2.5 on Pippit AI now and enjoy 90% OFF for a limited time! Comment “Pippit” and I’ll send you the link. Pippitofficial Try - #Pippit #Seedance25 #PippitAI #Seedance #PippitPartner #StoryStudio #Aifilm #3ddirectorstudio #marketingstudio
0:50

The official, native Seedance 2.5 is now available on Pippit AI for just $1.50 for your first month — 90% OFF. 🔥 Here’s the workflow I used: → Open Pippit AI and start with Creative Agent → Use Canvas to brainstorm and organize the creative direction → Build the story, scenes, and visual flow in Story Studio → Generate with Seedance 2.5 and refine the final result → Export the finished video in high quality What I like about the workflow is that Pippit’s Canvas brings different AI models and creative tools together in one workspace, while Seedance 2.5 can create cinematic long takes of up to 30 seconds with more precise control over timing and motion. More Affordable Seedance 2.5 Generation: For Seedance 2.5 at 720P, Pippit AI offers a promotional price of as low as $0.035/second, compared with $0.079/second on other tools. Try Seedance 2.5 on Pippit AI now and enjoy 90% OFF for a limited time! Comment “Pippit” and I’ll send you the link. Pippitofficial Try - #Pippit #Seedance25 #PippitAI #Seedance #PippitPartner #StoryStudio #Aifilm #3ddirectorstudio #marketingstudio

Theo Builds AI

78,943 Aufrufe • vor 17 Tagen

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.
2:01

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.

Axel Bitblaze 🪓

31,862 Aufrufe • vor 6 Monaten

🎉 Tailkit 4.0 is here, and I couldn't be more excited! 🙌🥳 But first - Giveaway Alert! Want to get a free Tailkit Developer license? Just drop a reply and give a like or repost (totally optional, but super appreciated). The lucky winner will be announced next Tuesday (October 8th) – good luck! Can you believe it’s already been 4 years since Tailkit’s journey started? ❤️ It feels like just yesterday I launched Tailkit 1.0 as an offline standalone web app back on October 1st, 2020. I'm really attached to this project because it was launched just a few days before I became a dad 👶😍 Fast forward to today, and Tailkit has grown into a fully customizable, feature-packed online app that gives you access to: - 550+ Tailwind CSS components (fully responsive + dark mode support) - 1,750+ Code snippets for HTML, React, Vue.js, and Alpine.js - 7 Marketing & Application Templates for HTML, React, Vue.js, and Laravel (fully responsive + dark mode support) - 10 Starter Kits for HTML, HTML with Vite, React, Vue.js, Laravel, Next.js, Nuxt, Astro, Svelte and Angular - 30 Days of Unlimited Design Service with every new Team license - Exclusive deals on third-party tools and projects - Handy helper tools like Button Builder, Color Palette, and Icon Finder - 3,700+ SVG Icons from Bootstrap and Heroicons - Free lifetime updates - Email support whenever you need it And the 4.0 update is packed with even more awesome features and upgrades: - 6 new UI components (Notifications) were added in Application UI package - 20 new UI components (Image/Content Sliders++) were added in Marketing package - React version (uses Vite) is introduced for all Templates - React code snippets were improved in all packages - Astro Starter Kit was added - Remove Dark Classes (from code snippets) option was added in App - Universal Dark Mode (preview pane can default to global dark mode) option was added in App - New preview colors (fuchsia, gray) were added in App - Heroicons v2 icons were updated to v2.1.5 adding 28+ brand new icons in App - 3 new exclusive deals are now available - UI design improvements in App - Various improvements and fixes in App - All dependencies were updated in Starter Kits - All dependencies were updated in Templates - Marketing website redesigned - Color Palette tool was made available to all I’ve put over 200 hours into this update alone, and I’m beyond excited to finally share it with you. Your continued support has made this journey possible, and I’m so grateful to have you along for the ride. 🙏 Wishing you an amazing day – remember, YOU ARE AWESOME! Go build something incredible! 🚀
1:17

🎉 Tailkit 4.0 is here, and I couldn't be more excited! 🙌🥳 But first - Giveaway Alert! Want to get a free Tailkit Developer license? Just drop a reply and give a like or repost (totally optional, but super appreciated). The lucky winner will be announced next Tuesday (October 8th) – good luck! Can you believe it’s already been 4 years since Tailkit’s journey started? ❤️ It feels like just yesterday I launched Tailkit 1.0 as an offline standalone web app back on October 1st, 2020. I'm really attached to this project because it was launched just a few days before I became a dad 👶😍 Fast forward to today, and Tailkit has grown into a fully customizable, feature-packed online app that gives you access to: - 550+ Tailwind CSS components (fully responsive + dark mode support) - 1,750+ Code snippets for HTML, React, Vue.js, and Alpine.js - 7 Marketing & Application Templates for HTML, React, Vue.js, and Laravel (fully responsive + dark mode support) - 10 Starter Kits for HTML, HTML with Vite, React, Vue.js, Laravel, Next.js, Nuxt, Astro, Svelte and Angular - 30 Days of Unlimited Design Service with every new Team license - Exclusive deals on third-party tools and projects - Handy helper tools like Button Builder, Color Palette, and Icon Finder - 3,700+ SVG Icons from Bootstrap and Heroicons - Free lifetime updates - Email support whenever you need it And the 4.0 update is packed with even more awesome features and upgrades: - 6 new UI components (Notifications) were added in Application UI package - 20 new UI components (Image/Content Sliders++) were added in Marketing package - React version (uses Vite) is introduced for all Templates - React code snippets were improved in all packages - Astro Starter Kit was added - Remove Dark Classes (from code snippets) option was added in App - Universal Dark Mode (preview pane can default to global dark mode) option was added in App - New preview colors (fuchsia, gray) were added in App - Heroicons v2 icons were updated to v2.1.5 adding 28+ brand new icons in App - 3 new exclusive deals are now available - UI design improvements in App - Various improvements and fixes in App - All dependencies were updated in Starter Kits - All dependencies were updated in Templates - Marketing website redesigned - Color Palette tool was made available to all I’ve put over 200 hours into this update alone, and I’m beyond excited to finally share it with you. Your continued support has made this journey possible, and I’m so grateful to have you along for the ride. 🙏 Wishing you an amazing day – remember, YOU ARE AWESOME! Go build something incredible! 🚀

John Champ

10,940 Aufrufe • vor 2 Jahren

Introducing Aval - a new open source format for interactive video on the web. It has a built-in state machine, frame accurate transitions, and packed alpha transparency. This is probably the craziest thing I’ve ever built with Codex. I’d been dreaming about this technology for years. Before AI, building it would have taken months of work. I could never justify that investment for a noncommercial open source project. Then, a little over a year ago, Airbnb created Lava for almost exactly the same purpose. That gave me hope. But Lava was never released as open source. So I decided to build my own, with AI. Aval comes with a compiler and a web renderer. Together, they give you: • a deterministic state graph - named states, authored triggers, and routing where the latest trigger wins. • frame accurate routes with transitions that begin on authored content frames using portals, finishes, cuts, and reversals. • small file size and low CPU overhead, perfect for small icons designed and animated in Blender. • seekless loops so the decoder timeline keeps moving forward across loop seams instead of seeking. • packed alpha transparency. transparent prerendered motion composited with WebGL2. • a web native runtime: decoding with WebCodecs and rendering with WebGL2. • progressive fallback: Host-owned fallback markup remains available for unsupported and reduced motion contexts. Now it exists, it’s open source, and it’s available today as a technical preview. I’ll be polishing it further over the next few days.
0:37

Introducing Aval - a new open source format for interactive video on the web. It has a built-in state machine, frame accurate transitions, and packed alpha transparency. This is probably the craziest thing I’ve ever built with Codex. I’d been dreaming about this technology for years. Before AI, building it would have taken months of work. I could never justify that investment for a noncommercial open source project. Then, a little over a year ago, Airbnb created Lava for almost exactly the same purpose. That gave me hope. But Lava was never released as open source. So I decided to build my own, with AI. Aval comes with a compiler and a web renderer. Together, they give you: • a deterministic state graph - named states, authored triggers, and routing where the latest trigger wins. • frame accurate routes with transitions that begin on authored content frames using portals, finishes, cuts, and reversals. • small file size and low CPU overhead, perfect for small icons designed and animated in Blender. • seekless loops so the decoder timeline keeps moving forward across loop seams instead of seeking. • packed alpha transparency. transparent prerendered motion composited with WebGL2. • a web native runtime: decoding with WebCodecs and rendering with WebGL2. • progressive fallback: Host-owned fallback markup remains available for unsupported and reduced motion contexts. Now it exists, it’s open source, and it’s available today as a technical preview. I’ll be polishing it further over the next few days.

Alex Barashkov

278,120 Aufrufe • vor 3 Monaten

I built a Claude skill that makes motion-style animation for YT SEO. - Paste your website, does high-intent keyword research - Paste a reference image (optional) - Scripts, edits, does SEO - It generates frames with GPT-Image-2 - and animates the video with Seedance 2.0 YouTube SEO is a great way to grow organically - YT is a search engine - YT videos rank on Google fast - YT videos get cited by AI as the #1 source But it's painful. This skill solves that. Other capabilities: articles, backlinks, Google Search Console, AI visibility reports and many more... Everything runs in Claude through the Distribb Skill Comment "SKILL", and I'll send it to you
0:25

I built a Claude skill that makes motion-style animation for YT SEO. - Paste your website, does high-intent keyword research - Paste a reference image (optional) - Scripts, edits, does SEO - It generates frames with GPT-Image-2 - and animates the video with Seedance 2.0 YouTube SEO is a great way to grow organically - YT is a search engine - YT videos rank on Google fast - YT videos get cited by AI as the #1 source But it's painful. This skill solves that. Other capabilities: articles, backlinks, Google Search Console, AI visibility reports and many more... Everything runs in Claude through the Distribb Skill Comment "SKILL", and I'll send it to you

borja

73,213 Aufrufe • vor 3 Monaten

GeoLibre v2.1 is here! GeoLibre is a free and open-source, lightweight, cloud-native GIS platform for visualizing, exploring, and analyzing geospatial data. It runs everywhere you do, in the web browser, on the desktop, on mobile, and inside Jupyter notebooks, all while keeping your data local and private. This release adds a QGIS-style Browser panel for exploring data from one place, animated route playback with video export, Wikipedia knowledge cards, and Mapillary street-level images. What's new in v2.1.0 - Browser panel (Data Source Manager): explore and add data from one place. Browse map services, connect to PostGIS databases and drill into their schemas and tables, open local files, and save Favorites, all with full keyboard navigation. - Route animation: send a marker along any line layer, follow the track in 3D with camera controls, and export the whole animation as an MP4 video. - In-browser object detection: run ONNX/YOLO models directly in the webview, with no server or Python required. - Map recording: capture the map canvas, or a drawn bounding box, straight to a video file from the browser. - Native-resolution photo viewer: view geotagged photos at full detail right on the map. - Wikipedia knowledge cards: click any place to pull up its Wikipedia summary and info card. - More planetary basemaps: USGS imagery for nine more celestial bodies, plus a new OpenAerialMap imagery search plugin. Try it out - Live demo: - GitHub: - Documentation: - Release notes: #GIS #Geospatial #OpenSource #RemoteSensing #DataVisualization #MapLibre #GeoLibre
1:49

GeoLibre v2.1 is here! GeoLibre is a free and open-source, lightweight, cloud-native GIS platform for visualizing, exploring, and analyzing geospatial data. It runs everywhere you do, in the web browser, on the desktop, on mobile, and inside Jupyter notebooks, all while keeping your data local and private. This release adds a QGIS-style Browser panel for exploring data from one place, animated route playback with video export, Wikipedia knowledge cards, and Mapillary street-level images. What's new in v2.1.0 - Browser panel (Data Source Manager): explore and add data from one place. Browse map services, connect to PostGIS databases and drill into their schemas and tables, open local files, and save Favorites, all with full keyboard navigation. - Route animation: send a marker along any line layer, follow the track in 3D with camera controls, and export the whole animation as an MP4 video. - In-browser object detection: run ONNX/YOLO models directly in the webview, with no server or Python required. - Map recording: capture the map canvas, or a drawn bounding box, straight to a video file from the browser. - Native-resolution photo viewer: view geotagged photos at full detail right on the map. - Wikipedia knowledge cards: click any place to pull up its Wikipedia summary and info card. - More planetary basemaps: USGS imagery for nine more celestial bodies, plus a new OpenAerialMap imagery search plugin. Try it out - Live demo: - GitHub: - Documentation: - Release notes: #GIS #Geospatial #OpenSource #RemoteSensing #DataVisualization #MapLibre #GeoLibre

Qiusheng Wu

12,291 Aufrufe • vor 3 Monaten