Shadcn UI Social Media Trending Block
SocialMediaTrending4 arranges social media post cards in a four-column vertical marquee grid. A title and underlined profile link sit above the marquee. Each column scrolls continuously; adjacent columns scroll in opposite directions at slightly different speeds. The marquee area has a fixed height with gradient fade masks at the top and bottom that blend the cards into the accent background. Each card shows a square image, avatar, username, and social media icon in the footer.
Accent background with the marquee clipped to a fixed height. Cards have rounded corners, square images with hover zoom, and a compact footer. The gradient overlays use background-to-transparent fades. Spacious layout with the title and profile link in a header row. Pure CSS marquee animation; no JavaScript for the scroll.
Ambient and dynamic, with the alternating scroll directions and staggered speeds creating a ticker-style feed. The vertical layout and fade masks give it a distinct feel compared to horizontal carousels. Moderate complexity; driven by CSS animation and column distribution. Requires an array of posts with images, avatars, usernames, and social icons. On mobile the grid collapses to two columns.
Dependencies
| Package | Type |
|---|---|
| react | NPM |
aspect-ratio @shadcn | Registry |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |