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 single-layer 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
Feature Section
A product intro, two features, and a dashboard: the full-height tiles stop the middle column's row lines at full strength.
Vivid Layer
Your work, in view.
Projects, tasks, and team updates in one place. Keep your next milestone in sight.
See the bigger picture
Track progress, spot blockers, and give every project a clear path from first idea to launch.
Move forward together
Keep owners, priorities, and conversations close to the work, so everyone knows what comes next.
Metrics
A hero tile with the headline number and its chart beside two stacked single-number tiles: tile size follows importance, and the row line between the small tiles stops at the hero.
Installs
vs. the previous six months
In the registry
37- Components
- 11
- Shaders
- 26
Uptime
13 weeks- Incidents
- 1
Testimonials
Two featured quotes over three short ones, each with a quote mark and avatar: every shared axis is drawn once from the layout.
We replaced a week of custom WebGL with two registry installs. The presets alone covered every page of the launch.
Every component arrived as one readable file. We edited the source instead of fighting a theme API.
The crop marks became our whole visual language.
Install, open the file, change three lines. That was the integration.
Finally a registry whose demos look like real pages.
Spec Sheet
A product and its specs touching across a 1px gap: a single layer draws one line per gutter like table rules, still stopping where a tile spans it.
Gallery
A staggered collage of captioned images whose overshooting marks cross and 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. It draws only the lines; the surface inside
them (background, corners, shadow) is yours to style. Setting overshoot
to 0 stops every line at the content bounds.
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 your content 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. - The inner line sits 1px outside the content, on the pixel a 1px ring or border would occupy, so it is the content's edge; a border of your own shows through the dash gaps, and a heavy one reads as the frame itself. This site's cards keep a background and shadow and leave the edge to the marks.
- 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. To recolor them, set
the inherited
--crop-marks-colorcustom property on the component or any ancestor (for exampleclassName="[--crop-marks-color:var(--color-primary)]"); every line inside, including the ones a frame or grid draws itself, picks it up. Each line also carriesdata-slot="crop-marks-line"anddata-axisfor targeted styling.
Credits
The monitor imagery was created for Vivid Layer, and the abstract images are renders of Vivid Layer's own shaders. The products, figures, and people quoted are fictional, and the testimonial avatars are placeholder portraits loaded from Pravatar, not included in the Registry package.
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.