Sublime

Masked gradient loader with SVG && CSS 🤙 1. Set pathLength on <circle> to 1.05 2. Set stroke-dasharray: 1.05 2. Animate stroke-dashoffset @​keyframes spin { 0%,5% { stroke-dashoffset: 1.05; } 45%,55% { stroke-dashoffset: 2.1;... See more

This could become a thing. Two battle it out with a Cursor speedrun. Same challenge Five minutes Live streamed Who should battle it out ? @RayFernando1337 @rileybrown_ai... See more

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); } https://t.co/cSJsVA9sA3

🤩 I just learned a super cool trick! Do you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I... See more

when the internet asks it shall receive (sound on!) https://t.co/OW8eCghnyI

🎨Took a 10min break to refresh respinner https://t.co/HDEi3fOxSV https://t.co/vG1yOs5ude

Masked gradient loader with SVG && CSS 🤙 1. Set pathLength on <circle> to 1.05 2. Set stroke-dasharray: 1.05 2. Animate stroke-dashoffset @​keyframes spin { 0%,5% { stroke-dashoffset: 1.05; } 45%,55% { stroke-dashoffset: 2.1;... See more

CSS Trick 🤙 You can use trigonometric functions in CSS to create sweet sine wave-style animation delays 🎬 .node { animation-delay: calc( sin((var(--index) / var(--count)) * 45deg) 👈 * var(--speed) * -1s ); }___... See more

Loader exploration from last year at Linear with @yannglt. It's a mix of `translateZ` and `rotateY`. https://t.co/2LIg7UIT9Z