Shimmer Effect Card
A card with a light sweep that glides across its surface. Use it as a loading skeleton or to add gentle motion to a featured tile in a busy grid.
A card with a light sweep that glides across its surface. Use it as a loading skeleton or to add gentle motion to a featured tile in a busy grid.
Search blocks by description or jump to a page.
Shimmer Effect Card is a standard card with a continuous light sweep layered over the entire surface. The card itself follows the familiar structure: a header with a title and short description, a body paragraph, and a footer row holding a cancel button on the left and a primary action button on the right. The shimmer runs as a translucent band that slides from one side to the other on a loop, giving the whole card a quiet sense of motion without altering any of its content.
The card content is fully independent of the effect. You can swap the title, description, body copy, and button labels for anything that fits your context. The footer layout accepts any pair of actions, and the body area can hold form fields, metadata, or a short list just as easily as a paragraph of text.
Reach for this block when a creative agency or studio wants a featured tile to feel alive without resorting to bold color or heavy animation. It works well on a services overview page, a project showcase grid, or a case study index where one card needs to stand out as the current or recommended item. Compared to the pulse border or border animation cards, the shimmer stays inside the surface rather than drawing attention to the frame, making it feel more refined and less urgent.
A natural flow around it on a Components page:
Before
After
The shimmer overlay suits any card content that benefits from a gentle signal of activity or importance. A few directions worth considering:
Tip: the shimmer is most effective on a light background where the translucent band stays visible; on very dark surfaces consider increasing the overlay opacity slightly in your global CSS.