@jh3yy — CSS sin() for staggered animation delay
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) ); }
That's a genuinely clever use of sin() — by mapping the character index through a quarter-sine wave (0° to 90°), you get a natural ease-in stagger without any JavaScript or a custom easing lookup table. The CSS trig functions (sin(), cos(), atan2()) have been supported in all major browsers since late 2023 and I've seen almost no one use them for layout or animation timing like this. Worth keeping in the toolkit.
@jh3yy — CSS scroll animation + interpolate-size
kinda wild how far you can get with CSS alone
a scroll animation tied to the content scroll powers the percentage update + icon animation
interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙
The interpolate-size: allow-keywords property is the interesting bit here — it enables transitions from height: 0 or width: auto to explicit pixel values, which has been a CSS pain point for years. Combined with @starting-style for enter animations and scroll-driven timelines for progress tracking, you end up with a fully declarative component that would have needed a ResizeObserver and a fair amount of JS a year ago. Still Chromium-only at the time of writing, but worth watching.
@jh3yy — color-mix() for component theming
a theming example using that CSS 🤙
aside { border-color: color-mix(in oklch, var(--color) 5%, #fff3); background: color-mix(in oklch, var(--color), #0007); color: color-mix(in oklch, var(--color), #fff); }
Smart, because mixing in oklch gives perceptually uniform results that RGB mixing doesn't. The pattern here — derive border, background, and text from a single --color custom property using color-mix() — is a clean way to build themeable components without a preprocessor or runtime CSS-in-JS. The oklch color space matters: mix red and green in oklch and you get a legible amber; do it in RGB and you get muddy brown.
@jh3yy — animating letter shapes with CSS
a breakdown of how to cook letters with CSS
put a little spin on it 👨🍳
This one is more demo than technique, but the underlying mechanics (SVG path morphing driven by CSS custom properties and scroll timelines) are worth understanding. jhey has been consistently showing how far you can push CSS without reaching for a canvas or a JS animation library. At some point the browser becomes the animation runtime and you mostly get out of the way.
@kkyrio — nginx rate limiting vs. paying Vercel for it
You're paying Vercel extra for rate limiting? 🤦♂️
5 lines of nginx = free API protection
No external services No dependencies No surprises
Protect your users without the premium pricing
Self-host confidently ✅
Directionally correct. limit_req_zone and limit_req in nginx are battle-tested, fast (bucket state lives in shared memory), and cost nothing beyond your server. The tradeoff is that nginx rate limits are per-server, so if you're behind a load balancer you either need sticky sessions, a shared Redis zone via nginx-redis-module, or an upstream proxy that handles it for you. For single-node deployments or internal APIs, this is absolutely the right call. For distributed setups, the calculus changes.
@adamsilverman — AI agents weekly recap
Here is a list of everything that happened in AI Agents this week 🧵
(save for later)
Honestly saved this for the format more than the content — weekly aggregation threads on a fast-moving topic like AI agents are useful when the signal-to-noise ratio is decent. The agents space was particularly active in late October 2024 (Anthropic's computer use release dropped the same week), so this captured a real spike in activity. Worth skimming the thread if you're trying to reconstruct what happened and when.