Crop Marks
The vivid layer crop marks — a crossing edge-line frame in double or single layers around a card or image.
Authentication
Frames a compact authentication form with the default double crop marks.
Join Now!
Login or create your Vivid Layer account.
By clicking continue, you agree to our Terms of Service and Privacy Policy.
Customize
Three Column Bento Grid
Two tiles span both rows, so the middle column's row lines stop at them at full strength.
Spans both rows
Top
Spans both rows
Row lines stop here
Two Row Bento Grid
Rows split four-two and two-four: each gutter's lines stop at the wide tile of the other row and fade only into open space.
Four columns
Two
Two
Four columns
Two Row Bento Grid with Three Column Second Row
Halves over thirds: every shared axis is drawn once from the layout.
Half
Half
Third
Third
Third
Hairline Bento Grid
Tiles that touch across a 1px gap: a single layer draws one line per gutter, still stopping where a tile spans it.
Spans two columns and both rows
Cell
Cell
Cell
Cell
Messy Bento Grid
A staggered collage of tiles whose overshooting marks cross and run off the stage.
Stagger the tiles and the crossings drift.
Off-grid.
Lines run off the stage.
Crop Marks draws the vivid layer signature frame: dashed border lines that overshoot each corner and cross, the way section dividers do across this site's bento grids and collages. It is a pure-CSS React component for Tailwind CSS and shadcn/ui projects — wrap a card or an image and the frame draws itself.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
layers | "double" | "single" | "double" | Frames the content with paired dashed lines a gap apart — the way two vivid layer cards sit beside each other — or with one line per edge, like a lone card. |
layerGap | number | 32 | Sets the distance in pixels between the paired lines when layers is double. |
overshoot | number | 72 | Sets how far every line extends past the content bounds. |
fade | boolean | true | Softens every line tip; turn off for full-strength dashes end to end. |
CropMarks also accepts native div props and wraps a single child — a
card, an image, or any block. Setting overshoot to 0 stops every line
at the content bounds.
CropMarksCard
The card surface that pairs with the marks — the vivid layer collage skin with its outline and drop shadow as switches.
| Prop | Type | Default | Description |
|---|---|---|---|
border | boolean | true | Draws the ring outline around the surface. |
shadow | boolean | false | Adds the collage drop shadow under the surface. |
CropMarksCard also accepts native div props.
CropMarksGrid
A bento grid that draws its crop marks from the layout. Pass the
layout as grid-template-areas rows and place each tile with
CropMarksGridItem; the grid derives every line from the track edges,
so each visible axis is drawn once. A line that meets a tile spanning
the gutter stops at that tile's edge at full strength — the internal
connection the site's bento grids show — and only tips that run into
empty space overshoot and fade.
| Prop | Type | Default | Description |
|---|---|---|---|
areas | string[] | — | The layout as grid-template-areas rows, for example ["a b c", "a d c"]. A "." leaves a cell empty. |
layers | "double" | "single" | "double" | Gives every gutter the paired lines of two adjacent cards, or one line per gutter for tiles that touch across a hairline gap. |
gap | number | 32 | Sets the gutter in pixels between tiles, and how far a line reaches to meet the tile it joins. Use 1 with a single layer so the line has a gap to sit in. |
overshoot | number | 72 | Sets how far tips that run into empty space extend past the grid. |
breakpoint | "md" | "lg" | "md" | Picks the viewport breakpoint where the areas layout applies; below it the tiles stack in DOM order, each drawing its own top and bottom lines while the grid keeps its side rails. |
CropMarksGrid also accepts native div props. Size the rows through
className (for example auto-rows-[6rem] md:grid-rows-[repeat(2,7rem)]);
the columns are equal and derived from the areas.
CropMarksGridItem
One tile of the grid; wrap a CropMarksCard or any opaque block with
it.
| Prop | Type | Default | Description |
|---|---|---|---|
area | string | — | Names the area from the grid's areas this tile fills. |
CropMarksGridItem also accepts native div props.
CropMarksLine
The dashed line primitive the frame and the grid are drawn with,
exported for collages — staggered layouts that no regular grid
describes, where tiles still share axes and a full frame per tile
would draw the shared lines twice. Draw each shared axis once and
position it yourself through className or style, fading only the
tips that run into empty space.
| Prop | Type | Default | Description |
|---|---|---|---|
axis | "horizontal" | "vertical" | "horizontal" | Sets the direction the line runs. |
fade | "both" | "start" | "end" | "none" | "both" | Picks which tips soften: both for a line whose ends run into empty space, start or end when only that tip does (start is the left or top tip), none for full-strength dashes. |
CropMarksLine also accepts native span props; it stays out of hit
testing and, like the frame, uses no z-index.
Behavior
- The lines paint beneath the content by plain DOM order — no
z-indexis used anywhere, so the frame never overlaps what it frames and never interferes with your app's stacking: sticky navs, dropdowns, and z-indexed children all behave as usual. - Every line has the same length:
overshootcontrols their shared reach, whilelayerGaponly shifts the second layer away from the content. - A fading tip softens over the overshoot distance, not a share of the
line's length, so horizontal and vertical tips always match. Standalone
CropMarksLines read the same distance from the inherited--crop-marks-fadecustom property (falling back to 10%). - In a grid, a tip that meets another tile stays full-strength and stops at that tile's edge; only tips that run into empty space overshoot and fade.
- The overshoot needs room: avoid
overflow-hiddenon close ancestors unless you want the tips clipped on purpose. - Dashes use translucent black in light mode and translucent white in dark mode, so the frame sits on any background.
Credits
The visual direction of Crop Marks is inspired by Aceternity UI. Its component architecture, API, grid algorithm, and implementation are independently created by Vivid Layer.