Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Quick video tutorial on a tiny (1.5kb!) SVG animation. It gives the illusion of blobs morphing randomly but it's much easier than it seems Text version: Live demo & source code: Youtube: Hosted on CodePen.IO

uuuuuulala's profile picture

Ksenia Kondrashova

8,991 subscribers

17,213 görüntüleme • 3 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

2 Yorum

DEVILGOTMY.S◎L profil fotoğrafı
DEVILGOTMY.S◎L3 yıl önce

@CodePen you make it look so simple.. great video.

Dima profil fotoğrafı
Dima3 yıl önce

@CodePen So easy to go and stylish

Benzer Videolar

It's slime time! On-scroll gooey overlay based on #GLSL shader and controlled with #GSAP #ScrollTrigger. Easy to customise and (I'm proud to say it 😎) responsive Live demo & source code: Made with GSAP ScrollTrigger GSAP Hosted on CodePen.IO
0:20

It's slime time! On-scroll gooey overlay based on #GLSL shader and controlled with #GSAP #ScrollTrigger. Easy to customise and (I'm proud to say it 😎) responsive Live demo & source code: Made with GSAP ScrollTrigger GSAP Hosted on CodePen.IO

Ksenia Kondrashova

21,611 görüntüleme • 2 yıl önce

Another WebGL image filter (and a great occasion to use my vacation pics) Around 10kb of GLSL + vanilla JS, no external libraries Live demo & source code: Hosted on CodePen.IO
0:23

Another WebGL image filter (and a great occasion to use my vacation pics) Around 10kb of GLSL + vanilla JS, no external libraries Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

37,791 görüntüleme • 2 yıl önce

Interactive sunny-side pattern! 🍳 (a little tribute to my love for gooey shapes and dumb demos) Live demo & source code: Made with #webgl #shader and a bit of GSAP (GSAP) Hosted on CodePen.IO
0:21

Interactive sunny-side pattern! 🍳 (a little tribute to my love for gooey shapes and dumb demos) Live demo & source code: Made with #webgl #shader and a bit of GSAP (GSAP) Hosted on CodePen.IO

Ksenia Kondrashova

19,023 görüntüleme • 1 yıl önce

Tiny Hair Shader is out now :) As promised, here is the polished version of the tutorial! Turned it into more of a walkthrough than a tutorial, but you'll see why
0:35

Tiny Hair Shader is out now :) As promised, here is the polished version of the tutorial! Turned it into more of a walkthrough than a tutorial, but you'll see why

tinynocky

38,752 görüntüleme • 1 yıl önce

We just released a new version of Kitten TTS - 15M param SOTA tiny text-to-speech model It has a significant quality improvement over the previous version. Still less than 25MB in size! Open-source, extremely tiny, expressive. Apache 2.0
0:36

We just released a new version of Kitten TTS - 15M param SOTA tiny text-to-speech model It has a significant quality improvement over the previous version. Still less than 25MB in size! Open-source, extremely tiny, expressive. Apache 2.0

Divam Gupta

92,840 görüntüleme • 7 ay önce

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇
0:32

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

348,480 görüntüleme • 3 yıl önce

STREAMER TOOL 📺 an application that makes it easier to grab sections of your VOD so you can organize better & not clutter space. it also keeps the quality and downloads it more quickly than twitch. twitchleecher- quick tutorial (under 2min) on what it is and where to get it.
1:48

STREAMER TOOL 📺 an application that makes it easier to grab sections of your VOD so you can organize better & not clutter space. it also keeps the quality and downloads it more quickly than twitch. twitchleecher- quick tutorial (under 2min) on what it is and where to get it.

anna ♡

58,690 görüntüleme • 6 ay önce

🩷 Seamless looping animation tutorial TYSM your huge support! I really appreciate it! I made a quick tutorial on how to seamlessly loop an animation, it's not only suitable for water but also for other effects. I hope you find this useful! #Live2DCreativeAwards11 #Live2D
1:43

🩷 Seamless looping animation tutorial TYSM your huge support! I really appreciate it! I made a quick tutorial on how to seamlessly loop an animation, it's not only suitable for water but also for other effects. I hope you find this useful! #Live2DCreativeAwards11 #Live2D

Maffi 💫 Live2D Mama

84,787 görüntüleme • 2 yıl önce

Last December I secretly launched Screenity 👻 It was a nightmare fixing bugs & supporting 100K+ users, but I made it. Now I'm working on the SaaS model w/ link sharing, a video editor, 3D mockups, animation... 🪄 Try it, it's free & open source! 👉
1:02

Last December I secretly launched Screenity 👻 It was a nightmare fixing bugs & supporting 100K+ users, but I made it. Now I'm working on the SaaS model w/ link sharing, a video editor, 3D mockups, animation... 🪄 Try it, it's free & open source! 👉

Alyssa X

152,482 görüntüleme • 2 yıl önce

It's been exactly three weeks since the war on Iran began, and it's easier to tell what's going on militarily than it is politically. Sky's Michael Clarke gives his analysis on the latest developments on day 21 of the Iran war. 🔗
4:03

It's been exactly three weeks since the war on Iran began, and it's easier to tell what's going on militarily than it is politically. Sky's Michael Clarke gives his analysis on the latest developments on day 21 of the Iran war. 🔗

Sky News

56,509 görüntüleme • 6 ay önce

It's been a while since I've put out a demo video. But it's for good reason, I promise. I've been working on Super mode for It brings context aware AI dictation and commands to any application on your Mac. • Get names and username's spelling correct • Text will match style of application you are using (messages, markdown, terminal commands, code etc) • Selected/Copied text will be modified according to instructions if provided • Aware of content in text editors or IDEs, it can continue your code or writing and reference the content.
6:47

It's been a while since I've put out a demo video. But it's for good reason, I promise. I've been working on Super mode for It brings context aware AI dictation and commands to any application on your Mac. • Get names and username's spelling correct • Text will match style of application you are using (messages, markdown, terminal commands, code etc) • Selected/Copied text will be modified according to instructions if provided • Aware of content in text editors or IDEs, it can continue your code or writing and reference the content.

Neil Chudleigh

15,981 görüntüleme • 2 yıl önce

Most people should probably update their priors on the state of open-source speech-to-speech. It's honestly kind of mind-blowing. We teamed up with Cerebras to build a fully open-source realtime voice demo (models + code) to show what's possible today. Demo : Blog: Go test it, fork it, tweak it, and impress your friends. video is raw, no cut, no speed-up, first take
1:44

Most people should probably update their priors on the state of open-source speech-to-speech. It's honestly kind of mind-blowing. We teamed up with Cerebras to build a fully open-source realtime voice demo (models + code) to show what's possible today. Demo : Blog: Go test it, fork it, tweak it, and impress your friends. video is raw, no cut, no speed-up, first take

Thomas Wolf

252,041 görüntüleme • 3 ay önce

NVIDIA just dropped another revolution in AI animation — real-time and open source. It's called ARDY. You type what the character should do — and it just does it. While moving. Change the text mid-walk, click a waypoint, add keyframes — it re-plans instantly. No baking, no waiting. And this time they dropped EVERYTHING at once: code, weights, working demo. Fully ready to run locally. I tested it. Honestly — shock. Feels like Kimodo × MotionBricks: that amount of control (text + constraints + trajectories), but live. And it fits in 20–24GB of VRAM. I didn't expect animation to move this fast — I thought 3D would get solved first. It's robotics pushing it: the same model drives their humanoid robots. Paper + code:
0:59

NVIDIA just dropped another revolution in AI animation — real-time and open source. It's called ARDY. You type what the character should do — and it just does it. While moving. Change the text mid-walk, click a waypoint, add keyframes — it re-plans instantly. No baking, no waiting. And this time they dropped EVERYTHING at once: code, weights, working demo. Fully ready to run locally. I tested it. Honestly — shock. Feels like Kimodo × MotionBricks: that amount of control (text + constraints + trajectories), but live. And it fits in 20–24GB of VRAM. I didn't expect animation to move this fast — I thought 3D would get solved first. It's robotics pushing it: the same model drives their humanoid robots. Paper + code:

Stefan 3D AI

111,992 görüntüleme • 2 ay önce

I forgot to mention this but the game has a demo on here's a snippet of CTRL+OPT+OUT gameplay. It's got so much sauce in it
1:07

I forgot to mention this but the game has a demo on here's a snippet of CTRL+OPT+OUT gameplay. It's got so much sauce in it

South East Asia Game Aesthetic

24,310 görüntüleme • 1 ay önce

This is one of the coolest open-source AI agent projects I've seen in a while: 'Understand Anything' It's a plugin for Claude Code, Codex, OpenCode etc. that analyzes your codebase and turns it into a knowledge base that you can interact with. It explains the codebase to you, rather than showing you the structure. It seems like it's designed for code but I opened my Obsidian vault of podcast highlights in Claude Code, then ran /understand. The result is a knowledge graph that I can search of highlights from 888 podcast episodes and 144K lines of markdown text.
0:22

This is one of the coolest open-source AI agent projects I've seen in a while: 'Understand Anything' It's a plugin for Claude Code, Codex, OpenCode etc. that analyzes your codebase and turns it into a knowledge base that you can interact with. It explains the codebase to you, rather than showing you the structure. It seems like it's designed for code but I opened my Obsidian vault of podcast highlights in Claude Code, then ran /understand. The result is a knowledge graph that I can search of highlights from 888 podcast episodes and 144K lines of markdown text.

Dan McAteer

175,169 görüntüleme • 3 ay önce

This should flip and go the other way if you stare at it for a bit! I love open source... a couple of days ago I posted the code to this Dyson Ring that I wrote, but I couldn't quite get the illusion right. Today, Sean Lavery checked in a double-sided rendering and some other changes that really sell it. Code is at based on a demo by Joseff
0:40

This should flip and go the other way if you stare at it for a bit! I love open source... a couple of days ago I posted the code to this Dyson Ring that I wrote, but I couldn't quite get the illusion right. Today, Sean Lavery checked in a double-sided rendering and some other changes that really sell it. Code is at based on a demo by Joseff

Dave W Plummer

25,408 görüntüleme • 10 ay önce

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself
6:51

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself

Wes Bos

222,832 görüntüleme • 2 yıl önce

and here's a timelapse version of it! i wanted more of it but flipaclip was being an asshole and didn't give me more than 4 minutes of work the numbers at the bottom are whenever i duplicate frames and how much, when cleaning a sketch it's easier to note for later
0:58

and here's a timelapse version of it! i wanted more of it but flipaclip was being an asshole and didn't give me more than 4 minutes of work the numbers at the bottom are whenever i duplicate frames and how much, when cleaning a sketch it's easier to note for later

xanderpander

15,874 görüntüleme • 1 yıl önce

I recorded a video on how you can build a complete RAG application without writing any code. I used Langflow, an open-source project that sits on top of Langchain. Langflow hides all the complexity and makes the process 10x easier. This is a step-by-step tutorial.
40:51

I recorded a video on how you can build a complete RAG application without writing any code. I used Langflow, an open-source project that sits on top of Langchain. Langflow hides all the complexity and makes the process 10x easier. This is a step-by-step tutorial.

Santiago

96,267 görüntüleme • 2 yıl önce

Building automations in 10 seconds. Is it really possible? You've heard of no-code automations (useful but takes a while to build) What if you could write text.... And the automation was built on it's own? It's called "text-to-automation" 👇
0:30

Building automations in 10 seconds. Is it really possible? You've heard of no-code automations (useful but takes a while to build) What if you could write text.... And the automation was built on it's own? It's called "text-to-automation" 👇

Aadit Sheth

106,150 görüntüleme • 3 yıl önce