All the Things

Coefficient Calculations These coefficients help determine how quickly the font size should increase or decrease as the viewport width changes.  These coefficients are calculated using calc() to determine the rate of change in font sizes. Each coefficient corresponds to a range of viewport widths, ensuring that the text scales smoothly and proportionally as the viewport changes.css --coefficient-0: calc((16 - 4) / (calc(479 / 100) - calc(1 / 100)));  --coefficient-1: calc((14 - 13) / (calc(767 / 100) - calc(478 / 100)));  --coefficient-2: calc((15 - 14) / (calc(991 / 100) - calc(767 / 100)));  --coefficient-3: calc((16 - 15) / (calc(1440 / 100) - calc(991 / 100)));  --coefficient-4: calc((18 - 16) / (calc(1920 / 100) - calc(1440 / 100)));  --coefficient-5: calc((20 - 18) / (calc(2400 / 100) - calc(1920 / 100))); Update: Always looking for ways to make the UI transitions smoother, with more fluidity, I turned the calculations above into a code sketch to see the behavior I was after.  I

Busy week coding UI motion animations, and transition effects. Let's see if I can name some of the things I used and tried... Gsap, Locomotive Scroll, After Effects, Splittext, webgl shaders, threejs, Matter.js, vanilla css, Illustrator, TextEdit, Terminal, Material UI Motion, Figma, svg animation code, Lottie, Bodymovin, Vercel, Relume, Webflow, Builder.io, Visily, Framer, Wix, React, Node, Python Moviepy, Pillow...  

I recently put together a short demo focused on a design process layer that lives between Figma prototypes and committing to final code… sketching the UI motion layer.  https://stephaniejagiello.com/lab/demo/