Loading video...

Video Failed to Load

Go Home

a little css trick i like ↓ adapt the radius gradually based on available space shrink from --r to 0 within --g 🧑‍🍳 .card__surface { --r: 42px; --g: 24px; border-radius: clamp( 0px, (100vi - 100cqi) / 2 * var(--r) / var(--g), var(--r) ); }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,521 subscribers

57,618 views • 6 days ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇
1:03

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

jhey ʕ•ᴥ•ʔ

352,220 views • 2 years ago

💥ETHNIC REPLACEMENT IN 🇨🇦: Over 500,000 unassimilated indians descend on Surrey to celebrate a foreign culture - the "largest celebration" of it's kind outside of india. R E M I G R A T I O N N O W !
0:49

💥ETHNIC REPLACEMENT IN 🇨🇦: Over 500,000 unassimilated indians descend on Surrey to celebrate a foreign culture - the "largest celebration" of it's kind outside of india. R E M I G R A T I O N N O W !

The Deport Report

12,007 views • 4 months ago

"We have a little history." Gabriel Iglesias (G a b r i e l - I g l e s i a s) on what it was like to have a moment with John Cena on his final night at MSG for #WWERaw #OffTheRopes | The Coach & Tom | Weekdays 2-4pm ET on Pro Wrestling Nation 24/7 Ch. 156 | SiriusXM Sports
1:11

"We have a little history." Gabriel Iglesias (G a b r i e l - I g l e s i a s) on what it was like to have a moment with John Cena on his final night at MSG for #WWERaw #OffTheRopes | The Coach & Tom | Weekdays 2-4pm ET on Pro Wrestling Nation 24/7 Ch. 156 | SiriusXM Sports

SiriusXM Busted Open

25,635 views • 9 months ago

Thanks to The Hub Today for having @AlisonNBCBoston and I on the show this morning to talk all things The Free State Project docuseries. Here's a short clip from the ~5 minute interview. (there's a special shoutout to D a n F Ξ r r i g ₳ n for his pivotal work on this series)
1:39

Thanks to The Hub Today for having @AlisonNBCBoston and I on the show this morning to talk all things The Free State Project docuseries. Here's a short clip from the ~5 minute interview. (there's a special shoutout to D a n F Ξ r r i g ₳ n for his pivotal work on this series)

Shira Stoll

10,317 views • 3 years ago

A Triple Spring-Mass Pendulum Just for The Fun of Physics We model the mass positions as r₁ = (x₁, y₁), r₂ = (x₂, y₂), r₃ = (x₃, y₃) with y positive downward in the simulation. The three spring segments are r₁ = r₁ − (0,0) r₁₂ = r₂ − r₁ r₂₃ = r₃ − r₂ Each spring applies a Hooke force along its own direction, F(r; k, L) = −k (|r| − L) (r / |r|) and each mass also feels gravity, Fgᵢ = (0, mᵢ g) So the equations of motion are m₁ r̈₁ = Fg₁ + F(r₁; k₁, L₁) − F(r₁₂; k₂, L₂) m₂ r̈₂ = Fg₂ + F(r₁₂; k₂, L₂) − F(r₂₃; k₃, L₃) m₃ r̈₃ = Fg₃ + F(r₂₃; k₃, L₃) We integrate these ODEs forward with RK4 using a small dt. Different scenes come from changing the mass ratios and from giving the third mass a small initial kick. The yellow trail is the path of the third mass. The inset phase portraits show the same motion in state space: (x₃, vₓ₃) and (−y₃, vᵧ₃) When those curves stay tight and loop cleanly, the motion is more regular. When they spread, fold, and smear, energy is being redistributed across the whole chain between gravity, spring stretch, and kinetic motion. #NonlinearDynamics #CoupledOscillators #SpringPendulum #ChaosInMotion #ComputationalPhysics #MathematicalVisualization
0:49

A Triple Spring-Mass Pendulum Just for The Fun of Physics We model the mass positions as r₁ = (x₁, y₁), r₂ = (x₂, y₂), r₃ = (x₃, y₃) with y positive downward in the simulation. The three spring segments are r₁ = r₁ − (0,0) r₁₂ = r₂ − r₁ r₂₃ = r₃ − r₂ Each spring applies a Hooke force along its own direction, F(r; k, L) = −k (|r| − L) (r / |r|) and each mass also feels gravity, Fgᵢ = (0, mᵢ g) So the equations of motion are m₁ r̈₁ = Fg₁ + F(r₁; k₁, L₁) − F(r₁₂; k₂, L₂) m₂ r̈₂ = Fg₂ + F(r₁₂; k₂, L₂) − F(r₂₃; k₃, L₃) m₃ r̈₃ = Fg₃ + F(r₂₃; k₃, L₃) We integrate these ODEs forward with RK4 using a small dt. Different scenes come from changing the mass ratios and from giving the third mass a small initial kick. The yellow trail is the path of the third mass. The inset phase portraits show the same motion in state space: (x₃, vₓ₃) and (−y₃, vᵧ₃) When those curves stay tight and loop cleanly, the motion is more regular. When they spread, fold, and smear, energy is being redistributed across the whole chain between gravity, spring stretch, and kinetic motion. #NonlinearDynamics #CoupledOscillators #SpringPendulum #ChaosInMotion #ComputationalPhysics #MathematicalVisualization

Mathelirium

36,155 views • 5 months ago

"I would like to contest the election on a BJP ticket. There is no safety for women, and everyone is suffering due to corruption, so I want to wipe out TMC from West Bengal." Mother of R G Kar victim.
0:34

"I would like to contest the election on a BJP ticket. There is no safety for women, and everyone is suffering due to corruption, so I want to wipe out TMC from West Bengal." Mother of R G Kar victim.

Facts

70,038 views • 5 months ago

Future CSS Tip! ⚡️ You can combine CSS :has() & :user-valid/:user-invalid to power micro interactions 😍 No JavaScript. Watch for the little animations ✨ label { --color: var(--default); color: var(--color); border-color: var(--color); } .group:has(:user-valid) { --color: var(--valid); } .group:not(:focus-within):has(:user-invalid) { --color: var(--invalid); } These new pseudo-elements only fire once an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌 Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎 It's a nice little touch. But remember, don't rely on color to communicate things! CodePen.IO link below! 👇
0:32

Future CSS Tip! ⚡️ You can combine CSS :has() & :user-valid/:user-invalid to power micro interactions 😍 No JavaScript. Watch for the little animations ✨ label { --color: var(--default); color: var(--color); border-color: var(--color); } .group:has(:user-valid) { --color: var(--valid); } .group:not(:focus-within):has(:user-invalid) { --color: var(--invalid); } These new pseudo-elements only fire once an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌 Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎 It's a nice little touch. But remember, don't rely on color to communicate things! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

284,005 views • 3 years ago

To All Our Dearest #Prabhas Anna 💣 D-A-R-L-I-N-G R-E-B-E-L-S HERE IS #Jaathini 🔥🔥🔥🔥🔥🔥🔥 From #TheRajaSaab 💣📀🙌🏿📈 Enjoy this in ACTION PARTS IN THE FILM 🎥
4:23

To All Our Dearest #Prabhas Anna 💣 D-A-R-L-I-N-G R-E-B-E-L-S HERE IS #Jaathini 🔥🔥🔥🔥🔥🔥🔥 From #TheRajaSaab 💣📀🙌🏿📈 Enjoy this in ACTION PARTS IN THE FILM 🎥

thaman S

169,873 views • 7 months ago

W A R N I N G! Modi's Amendments to the RTI Law Obstruct Vital Info, Shield his government, and Crush Accountability. This Assault on Transparency must be Stopped.
2:19

W A R N I N G! Modi's Amendments to the RTI Law Obstruct Vital Info, Shield his government, and Crush Accountability. This Assault on Transparency must be Stopped.

Muralidharan Gopal

37,023 views • 1 year ago

Just because things are getting wild on the field doesn't mean you can just get wild in the stands. Jo Koy and G a b r i e l - I g l e s i a s are here to teach you NFL stadium etiquette ⬇️
1:11

Just because things are getting wild on the field doesn't mean you can just get wild in the stands. Jo Koy and G a b r i e l - I g l e s i a s are here to teach you NFL stadium etiquette ⬇️

FOX Sports: NFL

25,488 views • 8 months ago

CSS scroll to decrypt 🤖 The trick is translating text on scroll within a clipped element ✨ (Watch 🎞️) .char { animation: t both steps(10); animation-timeline: --heading; animation-range: contain calc(var(--i) * 1%)...; } @​keyframes t { to { translate: 0 calc(100% - 1lh);}}
0:47

CSS scroll to decrypt 🤖 The trick is translating text on scroll within a clipped element ✨ (Watch 🎞️) .char { animation: t both steps(10); animation-timeline: --heading; animation-range: contain calc(var(--i) * 1%)...; } @​keyframes t { to { translate: 0 calc(100% - 1lh);}}

jhey ʕ•ᴥ•ʔ

264,678 views • 2 years ago

"A minivan is my favorite car to drive. ... That car has 18 cupholders, it gets like 500 miles every time you fill it up, it's hybrid, it has never failed me. It never breaks down. The maintenance on it is minimum." - G a b r i e l - I g l e s i a s
1:36

"A minivan is my favorite car to drive. ... That car has 18 cupholders, it gets like 500 miles every time you fill it up, it's hybrid, it has never failed me. It never breaks down. The maintenance on it is minimum." - G a b r i e l - I g l e s i a s

Club Shay Shay

37,171 views • 5 months ago

Mark your calendars! G a b r i e l - I g l e s i a s & Jo Koy, One Night Only at #SoFiStadium on 3/21/26! Presale 4/23 @ 10am (code: COMEDY), public on sale 4/25. 🎟️ Sign up to become a SoFi Stadium Insider to gain access to the venue pre-sale:
1:06

Mark your calendars! G a b r i e l - I g l e s i a s & Jo Koy, One Night Only at #SoFiStadium on 3/21/26! Presale 4/23 @ 10am (code: COMEDY), public on sale 4/25. 🎟️ Sign up to become a SoFi Stadium Insider to gain access to the venue pre-sale:

SoFi Stadium

17,851 views • 1 year ago

Account Abstraction is finally available across the Ethereum ecosystem! Now, powerful UX features are about to flow across the entire ecosystem. Here’s an example of an Account Abstraction–based feature we’ve been offering on Starknet for years: 1-tx E-V-E-R-Y-T-H-I-N-G
0:45

Account Abstraction is finally available across the Ethereum ecosystem! Now, powerful UX features are about to flow across the entire ecosystem. Here’s an example of an Account Abstraction–based feature we’ve been offering on Starknet for years: 1-tx E-V-E-R-Y-T-H-I-N-G

Starknet (Privacy Arc)

17,842 views • 1 year ago

"My manager, at the time, said 'You know what? This stupid movie about penguins? Are you kidding me?' So I passed on the movie. The movie freaking blew up. Oh it was stupid! Anyway, she's no longer my manager and everytime I see a penguin, I cry just a little tear." - G a b r i e l - I g l e s i a s
9:33

"My manager, at the time, said 'You know what? This stupid movie about penguins? Are you kidding me?' So I passed on the movie. The movie freaking blew up. Oh it was stupid! Anyway, she's no longer my manager and everytime I see a penguin, I cry just a little tear." - G a b r i e l - I g l e s i a s

Club Shay Shay

35,239 views • 5 months ago

Communists are bringing school students to the protest over the #Khamenei death and trying to put FILTH in their minds. Just watch this conversation 😲 Reporter: you are in which class Girl: 9th R: Why did you come here? G: There is a war going on between Israel and America 😭 R: Who bought you here? You are from school? G: No, the tuition institute sent us here R: Which institute? G: Brainwash Institute 😭 PS: I don't have any issues with these students and Kids, but bringing students for such protests should be avoided. High chances that this institute is a CPI funded one. They know nothing, but just arrived there to build the narrative. #Iran #IranWar #Israel
0:30

Communists are bringing school students to the protest over the #Khamenei death and trying to put FILTH in their minds. Just watch this conversation 😲 Reporter: you are in which class Girl: 9th R: Why did you come here? G: There is a war going on between Israel and America 😭 R: Who bought you here? You are from school? G: No, the tuition institute sent us here R: Which institute? G: Brainwash Institute 😭 PS: I don't have any issues with these students and Kids, but bringing students for such protests should be avoided. High chances that this institute is a CPI funded one. They know nothing, but just arrived there to build the narrative. #Iran #IranWar #Israel

Chota Don

11,333 views • 5 months ago

CSS Tip! ✨ You can lean into form control state and layered backgrounds to create input status strokes 😎 input:valid { --valid: 1; } input { background: var(--bg) padding-box, ..., var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 / 100% 100% border-box; } The trick is to layer up backgrounds using background-clip to leave a border space 🤏 Applying a transparent border gives you the space for the layered background to transition in 🎞️ Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0. To respect people's animations preferences, we can wrap that transition in a media query 🤙 @​media (prefers-reduced-motion: no-preference) { input { transition: background-position: 0.5s; } } Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too! Hope you find it useful! p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨ CodePen.IO link below! 👇
0:27

CSS Tip! ✨ You can lean into form control state and layered backgrounds to create input status strokes 😎 input:valid { --valid: 1; } input { background: var(--bg) padding-box, ..., var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 / 100% 100% border-box; } The trick is to layer up backgrounds using background-clip to leave a border space 🤏 Applying a transparent border gives you the space for the layered background to transition in 🎞️ Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0. To respect people's animations preferences, we can wrap that transition in a media query 🤙 @​media (prefers-reduced-motion: no-preference) { input { transition: background-position: 0.5s; } } Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too! Hope you find it useful! p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

239,700 views • 2 years ago