Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

14,125 görüntüleme • 10 ay önce •via X (Twitter)

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 görüntüleme • 2 ay önce

Not every hero wears a cap. Some carry a school bag. 🎒 Brought this cinematic animation to life with Seedance 2.0 on BudgetPixel AI Prompt 👇 Style: High-end 3D animated cartoon, cinematic Pixar-style lighting, expressive characters, shallow depth of field, dynamic motion blur, viral short-form pacing, 4K Scene 1 (0–3s) “Establish + Hook” Wide tracking shot from behind: a cartoon school boy walks alone on a quiet street, backpack bouncing slightly. Camera slowly pushes in (dolly-in). Subtle wind + soft suspense beat starts. Transition: quick whip pan left into next scene. Scene 2 (3–6s) “Threat Reveal” Snap zoom cut-in to a girl near a parked bike being threatened by two sneaky snatchers. One grabs her purse aggressively. Camera angle: low-angle wide shot to make snatchers look bigger and intense. Music intensifies sharply. Transition: fast heartbeat zoom blur into hero reaction. Scene 3 (6–9s) “Hero Moment Build” Close-up on the boy’s face determined expression, eyes reflecting light. He bends down (camera follows in slow-motion orbit shot) and picks up a small stone. Cinematic slow-motion throw with motion blur and dramatic lighting flare. Transition: impact cut (flash frame white) Scene 4 (9–11s) “Impact Chaos” Stone hits the bike with stylized spark FX + metallic clang sound vibe. Camera shakes slightly (handheld effect). Purse falls in slow motion. Snatchers react in exaggerated cartoon shock. Transition: speed ramp + forward push-in tracking shot Scene 5 (11–13s) “Action Resolution” The boy runs in smooth tracking side-shot (parallax motion), grabs the purse mid-motion. He steps in front of the girl protectively. Snatchers retreat in exaggerated cartoon panic (blurred background motion). Transition: soft stabilized slow fade motion Scene 6 (13–15s) “Hero Ending / Viral Hook Finish” Golden warm lighting. Medium close-up: boy returns purse gently. Girl smiles relieved. Camera slowly rotates around them (hero orbit shot). He puts on black sunglasses inslow-motion swag reveal. Soft romantic outro music fades. Final frame freezes for 0.5s (TikTok-style end lock).

Ai Arainz

45,634 görüntüleme • 1 ay önce