Loading video...

Video Failed to Load

Go Home

I created this gooey text effect animation using View Transitions and the blur + contrast method

k_grajeda's profile picture

Kevin Grajeda

4,893 subscribers

172,261 views • 1 year ago •via X (Twitter)

EducationScience & TechnologyArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

You can create a cool gooey effect by combining a blur and fade animations between icons with a high-contrast parent element
0:14

You can create a cool gooey effect by combining a blur and fade animations between icons with a high-contrast parent element

Kevin Grajeda

376,002 views • 1 year ago

Trying View Transitions in Next.js using 's next-view-transitions library. Love how straight-forward this was.
0:11

Trying View Transitions in Next.js using 's next-view-transitions library. Love how straight-forward this was.

Addy Osmani

33,113 views • 1 year ago

I created this mirror effect button using Expo It turned out great!
0:10

I created this mirror effect button using Expo It turned out great!

Mehdi

48,038 views • 7 months ago

Created an automatic motion blur effect for Tennis using Computer Vision 🎾 Any other visualization ideas for Roland Garros ? 🙂 Tech side: I used Tracknet + YOLOs
0:15

Created an automatic motion blur effect for Tennis using Computer Vision 🎾 Any other visualization ideas for Roland Garros ? 🙂 Tech side: I used Tracknet + YOLOs

Alexandre Devaux

35,117 views • 1 year ago

I love After Effects sometimes.✨ created this in 2 minutes using Fast Box Blur + Displacement Map
0:14

I love After Effects sometimes.✨ created this in 2 minutes using Fast Box Blur + Displacement Map

Jerry

30,267 views • 6 months ago

After a long time, I've created a new pen to try out the View Transitions feature and this is really cool! 🚀🚀 CodePen.IO
0:10

After a long time, I've created a new pen to try out the View Transitions feature and this is really cool! 🚀🚀 CodePen.IO

Aysenur

83,836 views • 2 years ago

introducing: gooey effect component for Framer use this component to add morphing animations that blend and flow across your site for a fun, smooth effect. comment "GOOEY" and i’ll send you the component :)
0:11

introducing: gooey effect component for Framer use this component to add morphing animations that blend and flow across your site for a fun, smooth effect. comment "GOOEY" and i’ll send you the component :)

Framer University

25,555 views • 1 year ago

Seedance 2.0 Prompt Share Created on mitte.ai Lately I've been sharing a lot of storyboard workflows. This video was created using character references with text to video. What I mean is: use whichever method makes you feel comfortable when creating your videos. Sometimes not every method works for every situation. There isn't just one correct way. Leaving the prompt and character generation progress below.
0:14

Seedance 2.0 Prompt Share Created on mitte.ai Lately I've been sharing a lot of storyboard workflows. This video was created using character references with text to video. What I mean is: use whichever method makes you feel comfortable when creating your videos. Sometimes not every method works for every situation. There isn't just one correct way. Leaving the prompt and character generation progress below.

Kōda

36,251 views • 2 months ago

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)
0:11

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)

Framer University

16,374 views • 1 year ago

this effect can be achieved using only css by combining the :has() and :not() pseudo-classes: `.menu:has(.item:hover) .item:not(:hover) { filter: blur(8px); }` which simply means: when a menu has a hovered item, blur every item inside it that isn't being hovered
0:10

this effect can be achieved using only css by combining the :has() and :not() pseudo-classes: `.menu:has(.item:hover) .item:not(:hover) { filter: blur(8px); }` which simply means: when a menu has a hovered item, blur every item inside it that isn't being hovered

daniel petho

18,843 views • 1 month ago

I created this using Claude + 3D animation: 1. Ask Claude for a scroll-based cinematic animation pla 2. Generate prompts for depth, parallax, and camera movement 3. Install Three.js + GSAP + ScrollTrigger 4. Use scroll to control zoom, scale, and scene transitions 5. Add layered images for 3D depth illusion 6. Apply smooth easing, lighting, and shadows for realism 7. Refine until it feels like one continuous scene Save this
0:16

I created this using Claude + 3D animation: 1. Ask Claude for a scroll-based cinematic animation pla 2. Generate prompts for depth, parallax, and camera movement 3. Install Three.js + GSAP + ScrollTrigger 4. Use scroll to control zoom, scale, and scene transitions 5. Add layered images for 3D depth illusion 6. Apply smooth easing, lighting, and shadows for realism 7. Refine until it feels like one continuous scene Save this

FHILY👑

390,775 views • 3 months ago

Underwater bubble effect 🫧created by Kevin Lim Wanasili using EmberGen and Blender geometry nodes #b3d
0:18

Underwater bubble effect 🫧created by Kevin Lim Wanasili using EmberGen and Blender geometry nodes #b3d

JangaFX Software

16,392 views • 7 months ago

This is how I created the aura effect in my recent commission #aftereffects #tutorial
0:17

This is how I created the aura effect in my recent commission #aftereffects #tutorial

Ezboy | VGen

25,386 views • 7 months ago

here's another AI video i did using this method:
0:12

here's another AI video i did using this method:

0x ROAS

50,297 views • 25 days ago

Technical Artist Oleksandr Makarenko unveiled this stunning damage decal effect created for the recently released space-themed MechWarrior 5: Clans – Ghost Bear DLC, created using Unreal Engine 5. Details:
0:10

Technical Artist Oleksandr Makarenko unveiled this stunning damage decal effect created for the recently released space-themed MechWarrior 5: Clans – Ghost Bear DLC, created using Unreal Engine 5. Details:

80 LEVEL

49,930 views • 1 year ago

Created "Solar Eclipse Animation" using HTML and CSS 😍 How is it Guys?
0:12

Created "Solar Eclipse Animation" using HTML and CSS 😍 How is it Guys?

Ali Sufian

77,940 views • 3 years ago

Control any timeline based animation dynamically using Joysticks and Scrolling and make it responsive in Rive. You can create this production ready asset in 3 minutes (walkthrough in the 🧵). Awesome Apple hello animation using Trim Paths created by Akansha Soni.
0:11

Control any timeline based animation dynamically using Joysticks and Scrolling and make it responsive in Rive. You can create this production ready asset in 3 minutes (walkthrough in the 🧵). Awesome Apple hello animation using Trim Paths created by Akansha Soni.

Philip Chung

22,345 views • 1 year ago

another old animation, this was the time where i learned how to do sub-pixel and using animation reference
0:15

another old animation, this was the time where i learned how to do sub-pixel and using animation reference

Rico

156,781 views • 1 year ago

#RankingOfKings #fanart, Using the method of #pixar in his new series #WinOrLose. #rig #rigging #blender #animation
0:11

#RankingOfKings #fanart, Using the method of #pixar in his new series #WinOrLose. #rig #rigging #blender #animation

Edward Ureña

206,496 views • 1 year ago

no way i just recreated the gooey effect in Framer 🤯 should i drop the sauce? (it costs 100 retweets 😬)
0:12

no way i just recreated the gooey effect in Framer 🤯 should i drop the sauce? (it costs 100 retweets 😬)

Framer University

14,614 views • 1 year ago