Loading video...

Video Failed to Load

Go Home

The open-source library of CSS motion effects, Kinetics, now contains 99 motion effects. You can copy CSS to the clipboard or the prompt so it's easy to replicate in your AI tool.

csaba_kissi's profile picture

Csaba Kissi

255,462 subscribers

70,909 views • 1 day ago •via X (Twitter)

Science & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Open source library of motion effects - Kinetics now has 99 animations. - CSS + React version - Prompt version for your AI coding agent
0:27

Open source library of motion effects - Kinetics now has 99 animations. - CSS + React version - Prompt version for your AI coding agent

Csaba Kissi

28,094 views • 10 days ago

Here is the collection of 60 open-source animated CSS tooltips. Both the CSS version and the prompt for AI tools are available.
0:22

Here is the collection of 60 open-source animated CSS tooltips. Both the CSS version and the prompt for AI tools are available.

Csaba Kissi

13,195 views • 8 days ago

Must-know open-source tools for coders and developers - Open source CSS/React motion snippets with prompts - Largest UI Animation & Micro Interaction Library coverflow.ashishgogula.in- iOS-like Cover Flow for React. - Docker compose samples - Gradient buttons with hover effects
0:36

Must-know open-source tools for coders and developers - Open source CSS/React motion snippets with prompts - Largest UI Animation & Micro Interaction Library coverflow.ashishgogula.in- iOS-like Cover Flow for React. - Docker compose samples - Gradient buttons with hover effects

Csaba Kissi

32,414 views • 17 days ago

Introducing the open-source Next.js Audio Starter Kit Add Text to Speech, Speech to Text, Sound Effects and Conversational AI to your product in minutes. Built with: • ElevenLabs SDK • Next.js + shadcn/ui • Tailwind CSS v4 Repo link in the comments below:
1:01

Introducing the open-source Next.js Audio Starter Kit Add Text to Speech, Speech to Text, Sound Effects and Conversational AI to your product in minutes. Built with: • ElevenLabs SDK • Next.js + shadcn/ui • Tailwind CSS v4 Repo link in the comments below:

ElevenLabs Developers

145,836 views • 1 year ago

Open-source and free apps for coders and makers - CSS Text effects with AI prompts - Open-source self-hosted dashboard for Amazon SES - Free directory of public APIs - Open-source security framework - UI library for building terminal user interfaces
0:35

Open-source and free apps for coders and makers - CSS Text effects with AI prompts - Open-source self-hosted dashboard for Amazon SES - Free directory of public APIs - Open-source security framework - UI library for building terminal user interfaces

Csaba Kissi

25,136 views • 4 days ago

You can make so many interesting patterns and effects using the 'replicate' effect in unicorn.studio. It's been my go-to lately.
0:21

You can make so many interesting patterns and effects using the 'replicate' effect in unicorn.studio. It's been my go-to lately.

Yianni

23,002 views • 8 months ago

We just launched AI Motion Graphics with Anthropic Think vibecoding for motion design. The cost of professional motion work just dropped to zero. All generated from a single prompt. Small teams can now produce the same quality as large agencies. No After Effects, no templates, no code — just describe what you want. Try it on
0:36

We just launched AI Motion Graphics with Anthropic Think vibecoding for motion design. The cost of professional motion work just dropped to zero. All generated from a single prompt. Small teams can now produce the same quality as large agencies. No After Effects, no templates, no code — just describe what you want. Try it on

Invideo

464,319 views • 5 months ago

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.
0:33

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

Addy Osmani

36,911 views • 1 year ago

figured out how to do motion blurs in the browser using svg filters and css
0:35

figured out how to do motion blurs in the browser using svg filters and css

ravarcheon

24,707 views • 7 months ago

THE FIRST EVER AI motion design tool with full real-time control. Higgsfield Vibe-Motion is LIVE. Motion Design was never that easy. One prompt creates any motion design you can imagine. Refine every parameter live on canvas. No creative limits.
0:37

THE FIRST EVER AI motion design tool with full real-time control. Higgsfield Vibe-Motion is LIVE. Motion Design was never that easy. One prompt creates any motion design you can imagine. Refine every parameter live on canvas. No creative limits.

Higgsfield AI 🧩

3,133,618 views • 5 months ago

Must-know open-source tools for coders - terminal UIs in React - copy/paste CSS/React transitions - React funnel charts - Javascript/React animation library - open-source headless cms
0:28

Must-know open-source tools for coders - terminal UIs in React - copy/paste CSS/React transitions - React funnel charts - Javascript/React animation library - open-source headless cms

Csaba Kissi

85,731 views • 24 days ago

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS
0:23

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

CSS by T. Afif

29,169 views • 3 years ago

Next-level motion from @HeyGen_Official I got to play with the new AI Motion from HeyGen, and it blew my mind! You generate an image and describe the motion; then, you can generate long videos from that avatar. Sound effects included! 1. Tales from The Heartland
1:11

Next-level motion from @HeyGen_Official I got to play with the new AI Motion from HeyGen, and it blew my mind! You generate an image and describe the motion; then, you can generate long videos from that avatar. Sound effects included! 1. Tales from The Heartland

Alex Patrascu

57,728 views • 1 year ago

introducing Seedance Effects. our new library lets you apply motion and style effects to any video with just a click. link and examples below 👇
0:20

introducing Seedance Effects. our new library lets you apply motion and style effects to any video with just a click. link and examples below 👇

Krea

39,159 views • 2 months ago

Learn this smooth and easy motion graphics in after effects
0:59

Learn this smooth and easy motion graphics in after effects

After Effects Tricks!

23,665 views • 7 months ago

Learn how to create a mesmerizing holographic effect in After Effects and take your motion graphics to the next level!
1:30

Learn how to create a mesmerizing holographic effect in After Effects and take your motion graphics to the next level!

Premiere Pro Tricks!

17,550 views • 11 months ago

🚀 Motion has landed in Modvfi! With Motion Effects, you can quickly transform your designs into scroll-stopping loops, and create insane motion effects in seconds. We're live on Product Hunt 😸, come by and let us know what you think!
0:41

🚀 Motion has landed in Modvfi! With Motion Effects, you can quickly transform your designs into scroll-stopping loops, and create insane motion effects in seconds. We're live on Product Hunt 😸, come by and let us know what you think!

Modyfi

53,210 views • 2 years ago

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…
1:56

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

Firefox for Web Developers

11,375 views • 4 months ago

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡
0:24

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

jhey ʕ•ᴥ•ʔ

213,366 views • 8 months ago

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,425 views • 1 year ago