Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below

BalintFerenczy's profile picture

balint

2,792 subscribers

1,578,844 Aufrufe • vor 11 Monaten •via X (Twitter)

Wissenschaft & TechnologieBildungKunst
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!
0:27

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,591 Aufrufe • vor 1 Jahr

I made a design tool. 95% of it was coded by Claude AI. You can design, animate SVG patterns and export to vectors, png, video or GIF. Use presets, save designs and share urls. Works great on mobile and web. 10k lines of code. The future is insanely fun.
0:59

I made a design tool. 95% of it was coded by Claude AI. You can design, animate SVG patterns and export to vectors, png, video or GIF. Use presets, save designs and share urls. Works great on mobile and web. 10k lines of code. The future is insanely fun.

Meng To

237,009 Aufrufe • vor 2 Jahren

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇
0:24

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

210,440 Aufrufe • vor 2 Jahren

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇
0:55

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

215,359 Aufrufe • vor 3 Jahren

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,255 Aufrufe • vor 2 Jahren

i removed the tail on my character a while ago cause it was causing some issues.... and was kinda annoying to animate but i always wanted it to come back so now its physics based !! still needs a bunch of tweakin but yeeeee
0:20

i removed the tail on my character a while ago cause it was causing some issues.... and was kinda annoying to animate but i always wanted it to come back so now its physics based !! still needs a bunch of tweakin but yeeeee

naniel

45,820 Aufrufe • vor 7 Monaten

A U.S Border Patrol officer started harassing a Canadian tourist by honking and pointing to this man’s Ontario license plate when he was about two miles from the border then got on his butt and then pulled up next to him and saw his camera and took off! They’re doing it all over!
0:39

A U.S Border Patrol officer started harassing a Canadian tourist by honking and pointing to this man’s Ontario license plate when he was about two miles from the border then got on his butt and then pulled up next to him and saw his camera and took off! They’re doing it all over!

Suzie rizzio

208,007 Aufrufe • vor 9 Monaten

I was given the chance to animate and model for Hakos Baelz's trip to NinjaTokyo! 🎲🐀 #BaelzBrush Here's a little segment of it! You can watch the full version on her youtube channel! (link below)
1:01

I was given the chance to animate and model for Hakos Baelz's trip to NinjaTokyo! 🎲🐀 #BaelzBrush Here's a little segment of it! You can watch the full version on her youtube channel! (link below)

Yoolie

25,549 Aufrufe • vor 1 Jahr

i accidentally made the best openapi client generator (again) and now it supports any TS schema validation lib, has an Effect based client, has a first-class Tanstack Query adapter, allows filtering to only some endpoints.. without plugins, just a few flags
0:35

i accidentally made the best openapi client generator (again) and now it supports any TS schema validation lib, has an Effect based client, has a first-class Tanstack Query adapter, allows filtering to only some endpoints.. without plugins, just a few flags

alex

16,858 Aufrufe • vor 10 Tagen

Frankston VFL fans weren’t thrilled by the Pies stars getting off the ground very quickly escorted by security guards post match but given the fans are allowed on the ground at times and it was late on a Saturday night it was forward planning by Collingwood. Both pulled up well
0:20

Frankston VFL fans weren’t thrilled by the Pies stars getting off the ground very quickly escorted by security guards post match but given the fans are allowed on the ground at times and it was late on a Saturday night it was forward planning by Collingwood. Both pulled up well

Jon Ralph

111,030 Aufrufe • vor 1 Jahr

RFK Jr: “They recommended putting masks on babies.” “The CDC told us it was science-based.” “It wasn't, it was a political decision.” “They allowed all of our schools to be closed and that order was written by the teachers union and it hurt working people all across this country.” “They said it was science-based, but it was a political decision.” “We're getting the politics out of the CDC and returning it to a science-based agency.”
0:34

RFK Jr: “They recommended putting masks on babies.” “The CDC told us it was science-based.” “It wasn't, it was a political decision.” “They allowed all of our schools to be closed and that order was written by the teachers union and it hurt working people all across this country.” “They said it was science-based, but it was a political decision.” “We're getting the politics out of the CDC and returning it to a science-based agency.”

End Tribalism in Politics

360,971 Aufrufe • vor 10 Monaten

Found a method to see inside some chips, without having to unmount or destroy the chips. Best part - the method only relies on lightly modded off-the-shelf cameras and lenses. Read more at
0:35

Found a method to see inside some chips, without having to unmount or destroy the chips. Best part - the method only relies on lightly modded off-the-shelf cameras and lenses. Read more at

bunnie

192,799 Aufrufe • vor 3 Jahren

He sent it. I was in complete shock when he flew by on the inside, knew he was going to hit the wall, and still almost pulled it off. That moment definitely inspired some wild moves like Chastain at Martinsville.
0:53

He sent it. I was in complete shock when he flew by on the inside, knew he was going to hit the wall, and still almost pulled it off. That moment definitely inspired some wild moves like Chastain at Martinsville.

Jimmie Johnson

181,222 Aufrufe • vor 1 Jahr

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇
0:36

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,830 Aufrufe • vor 2 Jahren

A Switzerland-based startup Flexion has created a robotic brain that helps the Unitree G1 move smoothly and work on its own. It uses reinforcement learning, where the robot trains in simulations to learn walking, balancing, and picking objects. In tests, it cleaned a space by finding and placing items in a basket without human help.
0:47

A Switzerland-based startup Flexion has created a robotic brain that helps the Unitree G1 move smoothly and work on its own. It uses reinforcement learning, where the robot trains in simulations to learn walking, balancing, and picking objects. In tests, it cleaned a space by finding and placing items in a basket without human help.

Space and Technology

17,557 Aufrufe • vor 3 Monaten

We’d gone 12 matches without getting one over France. In ’94, everything changed. The Arms Park was alive, the energy was electric, and every pass felt like it carried a nation with it. Proud to have played my part in a win that meant more than most. #NeverGiveUp #WALvFRA
2:51

We’d gone 12 matches without getting one over France. In ’94, everything changed. The Arms Park was alive, the energy was electric, and every pass felt like it carried a nation with it. Proud to have played my part in a win that meant more than most. #NeverGiveUp #WALvFRA

Rupert Moon

21,371 Aufrufe • vor 5 Monaten

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇
1:23

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

190,822 Aufrufe • vor 2 Jahren

I've been working on this thing on and off for a little over 2 years now, and I think I'm finally going to call it done. Everything was done by myself, except a couple of materials & the song. Link below #TheAmazingDigitalCircus
0:35

Sensitive content

I've been working on this thing on and off for a little over 2 years now, and I think I'm finally going to call it done. Everything was done by myself, except a couple of materials & the song. Link below #TheAmazingDigitalCircus

Poole

42,062 Aufrufe • vor 2 Monaten

In my AI filming career, there is a niche I really enjoy working with and where AI Video brings lots of value. That niche is Real Estate. AI is perfect to animate 3D renders and to create b-role for mood. Here I will try to answer two questions: 1 - How to make a real estate video? 2- How to sell a house? This was a work done based on 3D Renders (provided by The Creative Farm, more on them below). Sound design made by noon (feel free to DM her for great sound design) Below I will break down a bit of the process, the prompts, timespans, the tools I used as well as some secrets this time around (feeling pretty today) It will be a bit long, so bookmark it or save it for later if you have the interest but lack the time.
0:42

In my AI filming career, there is a niche I really enjoy working with and where AI Video brings lots of value. That niche is Real Estate. AI is perfect to animate 3D renders and to create b-role for mood. Here I will try to answer two questions: 1 - How to make a real estate video? 2- How to sell a house? This was a work done based on 3D Renders (provided by The Creative Farm, more on them below). Sound design made by noon (feel free to DM her for great sound design) Below I will break down a bit of the process, the prompts, timespans, the tools I used as well as some secrets this time around (feeling pretty today) It will be a bit long, so bookmark it or save it for later if you have the interest but lack the time.

FERA

218,120 Aufrufe • vor 11 Monaten

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇
0:33

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

647,181 Aufrufe • vor 2 Jahren