Plugin for Tailwind CSS v4
Elegant, scroll-driven edge masking. One class. Zero
JavaScript.
By one of the creators of
tw-shimmer
CSS-only shimmer effects, with 500k+ weekly npm
downloads.
.
npm i tw-fade
fade-x
fade-y
how'd you get the messages to fade out at the top
fade-y on the scroll container
no wrapper?
none. just applies to the scrollable element directly
ok moved it
but the top fade went away?
you're at the top. nothing above you, so nothing to hint at
and when i'm at the bottom
same. the newest message is always readable
js?
no. just css
can i do that on the tab strip too
yep, just add fade-x
ok that's kind of lovely
right?
unrelated but go outside
why
the moon is huge right now
the moon is always the same size
just go look
ok going
fade fade-size-2xl fade-travel-lg
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Fades appear only when there is more content to scroll, then ease away again at either edge.
Eased alpha ramps dissolve content into the surface instead of ending on a clipped line.
Axis, size, travel, and clear-zone utilities compose directly on the scroll container.