component 12 / 28WORKING
SC Corner Lines
- type
- Code Component
- platform
- Framer
- last update
- read time
- 3–5 min
- license
- SecretoCho Design
demo · runs with JavaScript
Adds pixel-snapped SVG corner strokes that hug container edges, with configurable color, line width, and corner size for editorial frames and UI accents.
SC Corner Lines adds crisp, pixel-snapped corner accents to any frame using lightweight SVG lines. Each corner renders a horizontal and vertical stroke that hug the container edges, with configurable color, line width, and corner size.
- Visual
- Frame Accent
- SVG
- UI Accent
Main
Overview
- Built With
- React, SVG, Framer Code Component API
- Layout Support
- Responsive (prefers fixed min 16×16)
- Orientation
- Corner accent overlay
- Ideal Use Case
- Card frames, hero modules, gallery captions, product shots, editorial panels
Tags
Code comment
/** * SC Corner Lines * © SecretoCho Design 2025 * Pixel-snapped corner strokes for framing cards, images, and panels. * @framerDisableUnlink * @framerSupportedLayoutWidth any-prefer-fixed * @framerIntrinsicWidth 16 * @framerSupportedLayoutHeight any-prefer-fixed * @framerIntrinsicHeight 16 */Dependencies
- Technologies
- None (pure SVG)
- Notes
- No runtime libraries; ships with Framer’s standard runtime.
Complexity
- Logic Level
- Low (deterministic geometry)
- Runtime Cost
- Very Low (tiny SVG paints)
- Component Size
- ~1–2 KB (raw TSX)
- Notes
- Sub-pixel correction prevents blurry lines on odd stroke widths.
Guide
Instructions
- Add SCCornerLines to your Framer project.
- Adjust Line Color to match your brand/foreground.
- Set Line Width for vibe (1–3px recommended).
- Tune Corner Size to extend strokes along edges.
- Layering: place on top and disable pointer events on the parent if needed.
Examples / Presets
Editorial Thin
- color
- #FFFFFF
- width
- 1
- size
- 22 (on dark imagery)
Neon UI
- color
- #00FF99
- width
- 2
- size
- 28
Subtle Card
- color
- rgba(0,0,0,.35)
- width
- 1
- size
- 16
Mechanics
How it Works
- Geometry: For a given size (box) and width (stroke), the component computes:
- half = stroke/2 and edge = box - half to align strokes to pixel centers.
- Per Corner: Each corner renders two path segments: one along the x-axis and one along the y-axis.
- Positioning: Four tiny SVGs are absolutely positioned at each corner, so they hug the container edges regardless of parent size.
- Crispness: Using stroke-linecap "square" and drawing at half offsets avoids fuzzy anti-aliasing on odd/even pixel widths.
Performance & Tuning
- SVG paths are minimal; cost is effectively zero.
- Prefer 1–2px stroke for crisp UI; 3–4px for bold editorial frames.
- Very large Corner Size values can overlap content—test at your target layout sizes.
Compatibility & Limits
- Works across evergreen browsers.
- No scripts, no events; purely visual overlay.
- Honors parent transforms; make sure parent doesn’t apply unwanted overflow: hidden that clips the corners prematurely.
Quality
Accessibility
- Decorative only. If the corners do not convey meaning, consider aria-hidden="true" on the wrapper or use as a background decoration.
Security & Privacy
- No network calls, storage, or permissions.
- No global listeners; no user data processed.
Reference
Props
| name | type | default | description |
|---|---|---|---|
color | string | #00FF99 | Stroke color for the corner lines |
width | number | 2 | Line (stroke) width in pixels |
size | number | 24 | Length of each corner “arm” in pixels (per side SVG box) |
Notes & Tips
- On high-DPI displays, odd pixel Line Width may still look crisp thanks to half-pixel alignment—keep it to 1 or 2 for safest results.
- To frame media without covering important content, add inner padding equal to width + 2px.
Troubleshooting / FAQ
Lines look soft
Try integer Corner Size and whole-pixel Line Width; ensure no CSS scale transforms on the element.
Corners clip
Parent overflow: hidden may cut them; increase container padding or allow overflow.
Color seems dim
Check any opacity on ancestor layers; SVG inherits composite opacity.
Source
Header comment
/** * SC Corner Lines * © SecretoCho Design 2025 * Pixel-snapped corner strokes for framing cards, images, and panels. */Key excerpt
Each path sits half a stroke inside its box, so whole-pixel widths draw on whole pixels: the setup and the first of four corners.
export default function SCCornerLines({ color, width = 2, size = 24 }: Props) { const stroke = Number(width) || 2 const box = Number(size) || 24 const half = stroke / 2 const edge = box - half const lineProps = { stroke: color, strokeWidth: stroke, strokeLinecap: "square" as const, fill: "none", } const svg = (p: string[], style: React.CSSProperties) => ( <svg width={box} height={box} style={{ position: "absolute", ...style }} > <path d={p[0]} {...lineProps} /> <path d={p[1]} {...lineProps} /> </svg> ) return ( <div style={{ position: "relative", width: "100%", height: "100%", minWidth: 16, minHeight: 16, contain: "layout paint size", transform: "none", }} > {/* Top Left */} {svg([`M0,${half} L${box},${half}`, `M${half},0 L${half},${box}`], { top: 0, left: 0, })}Credits
Credits
Minimal corner-mark patterns inspired by editorial print and wireframe guides.
Implementation and Framer adaptation by SecretoCho Design.
- license
- SecretoCho Design
SecretoCho Design 2025
Disclaimer
Provided “as is” for visual framing accents. Validate contrast and interaction hit areas in your final layouts.
Proves
Hiring a design engineer?
I’m open to senior design engineer roles: remote from Belgrade, or relocation with visa sponsorship. Write to me, or read the CV first. Client work stays selective, one project at a time.
sc@secretocho.design