X Bookmarks — 2024 KW05: CSS scroll-driven text highlights

February 1, 2024

|bookmarks

by Florian Narr

X Bookmarks — 2024 KW05: CSS scroll-driven text highlights

@jh3yy — CSS scroll-driven text highlight animation

CSS Trick 📜

You can trigger text highlights on scroll with scroll-driven animations 😎

mark {
  animation: highlight;
  animation-timeline: view();
}
@keyframes highlight { to { --lit: 1; } }
mark span {
  background-position: calc(var(--lit) * -110%) 0;
  transition: ...
}

Love this — animation-timeline: view() ties the animation lifecycle to the element's scroll position in the viewport, so you get a highlight that paints as you read, with zero JavaScript. The --lit custom property approach to control background-position is clean: one CSS variable drives the whole reveal. It's a small trick but replaces a non-trivial amount of IntersectionObserver boilerplate.

@reach_vb — Whisper optimized for Apple Neural Engine

Whisper powered by Apple Neural Engine! 🔥

The lads at @argmax optimised Whisper to work at blazingly fast speeds on iOS and Mac!

  • All code is MIT-licensed.
  • Upto 3x faster than the competition.
  • Neural Engine as well as Metal runners.
  • Open source CoreML models.

Smart, because the bottleneck on-device Whisper has always been GPU utilization — most CoreML ports just converted the weights without rethinking the compute graph for the ANE's architecture. If argmax actually restructured the model ops to match what ANE handles natively (matrix multiply, element-wise ops in specific shapes), 3x is plausible. MIT license and open CoreML models means you can slot this into an iOS app without any server roundtrip. Worth testing against the stock model on an M-series chip.

@_georgemoller — React component composition pattern

⚛️ React Tip: use composition to easily extend your components while keeping them close for modification ↓

That's a pattern that keeps biting people who reach for prop drilling or config objects first. Composition — passing children or render slots instead of adding a new prop every time a new variant appears — keeps the component boundary clean and doesn't require touching the parent when you add a consumer-side variation. Nothing groundbreaking if you've been in React for a while, but it's a useful thing to link a teammate when the component API is starting to smell.