shadcn.io is not affiliated with official shadcn/ui
Noise Grain Texture CTA Block for React
A reverse split call to action for an essay series: the magazine cover drawn on film grain in a hairline frame beside a serif headline, a lede with a drop cap, a byline, a Shine Button and an archive link.
Installation
Overview
A call to action set like a magazine page, for React with Base UI. On the start side a framed cover for The Quiet Release, No. 07, sits on fine film grain in your theme's own colours, felt more than seen, with a serif title and a three-line contents list. A hairline divider separates it from the teaser on the end side: a quiet badge naming the essay series, a serif headline, a lede that opens with a drop cap that inks in on load, a byline, a Shine Button to read the essay and a ghost button to browse the archive. It's built from Grain, Drop Cap Text, Badge, Guides, Shine Button and Button. For editorial products, newsletters, essays and any closing section that wants a printed, human feel.
FAQ
How do I make the grain stronger or quieter?
Set intensity on Grain to subtle, medium (here) or strong, and speed for how fast it re-rolls. grainColor takes any CSS colour and defaults to your theme's foreground. Text on grain should use the full foreground colour: muted text loses contrast against the specks.
How does the drop cap work?
DropCapText sets the paragraph's own first letter as a large initial sunk three lines into the text, so the sentence stays whole for screen readers and copying. It inks in once on load (trigger="mount"), and with reduced motion it is simply there. capColor, lines and duration change it.
How is the cover placed before the text in a reverse split?
The teaser comes first in the page, so reading order and focus start with the headline and the buttons. The cover is the second grid child and takes lg:col-start-1 lg:row-start-1, which puts it on the start side from lg. Below lg the teaser comes first and the cover follows under a rule. The cover is decoration, hidden from assistive technology.
Does the grain flicker, and can I stop it?
It re-rolls in steps, softly, with CSS only. With reduced motion turned on it holds still. It is measured against the rendered pixels in every preset.
Related
- Pro
Dot Grid Backdrop CTA
Drawn accentsA centred call to action between solid rails over a halftone dot field that clears behind the copy, with a version badge, the Shine Button, a ghost link and a closing band of three facts in your theme.
- Pro
Spotlight Vignette CTA
Drawn accentsA card-in-card call to action lit like a stage, with slow spotlight cones from above and a vignette that fades the edges into a raised panel that follows your theme, over a two-line headline, a Shine Button and a quiet second action.
- Pro
Diagonal Accent Beam CTA
Drawn accentsA split call to action for a release week: the headline and two buttons beside a hairline-framed figure where thin diagonal beams of light sweep behind a card listing the week's launches, between solid rails, in your theme.
- Pro
Centered Noise Texture Hero
BackdropsA compact centered hero on a fine paper texture inside a hairline frame, with an announcement pill, a two-line headline, three features and the Shine Button.
- Pro
Concentric Rings Hero
BackdropsA compact, centred hero for a design tool on solid rails: concentric rings breathe behind a headline, a Shine Button and an outline button, over a ruled band of three stats.
- Pro
Graph Grid Paper CTA
Drawn accentsA statement call to action on graph paper: the page column is the sheet, with a staircase of filled cells rising from one corner, a Shine Button, a ghost link, and a closing band with the version, the install command and the licence.