Stroke Lab
Configurable luminous edge systems for VibeIRL glass surfaces.
Explore imported stroke treatments, tune them safely, preview them on product primitives, and prepare a shared-token payload when a recipe is ready to graduate.
Recipes
4 imported treatments
Controls
Weight, placement, color, opacity
Sandbox
8 component targets
Stroke controls
Tune weight, placement, color, opacity, and motion without flattening the recipe.
Controls are applied through a shared stroke config, but unsupported options are disabled per recipe so the imported behavior stays honest.
Position
Color mode
Live glass card
Vibe preview
Current recipe, weight, placement, opacity, and color stops are applied directly here.
Glow
Blur
Motion
Gradient stroke color
Each stop carries color, position, and opacity. Use low-opacity tail stops to make traveling strokes fade naturally.
Glow handling
Controls the bloom bias independently from stroke weight and stop opacity.
Treatment gallery
Four imported stroke identities, kept as separate recipes.
Each card documents how the reference renders the edge, where the glow sits, and which controls can be safely exposed.
Kevin Powell / WbbXRPL
Google AI Glow Border
A CSS border-box treatment using layered custom properties, transparent borders, and animated conic/radial color energy.
Open source referenceAhmod Musa / MYaaEQV
Neon Travel Ring
A no-JS product-card border using CSS @property, conic-gradient rotation, and a separate blurred outer glow.
Open source referencedriftblaze / wBMqMoG
Input Travel Stroke
A Google-style input hover stroke that uses a conic sweep, transparent border-box, and a blurred duplicate layer.
Open source referencestepj / LEGLJRa
AI Border Gradient
A layered Google AI mode border with scaled conic-gradient plates, blur containment, and ambient spin.
Open source referenceSandbox preview
Apply the selected treatment to real UI primitives.
The sandbox is local to Stroke Lab. It lets engineers compare how the same stroke behaves on buttons, avatars, inputs, cards, badges, and modal edges.
Stat tile
98.2%
Glow hierarchy retained.
Tile / card
Dashboard and review surfaces
Jadyn
Amped / social
New thread reply
The border carries the message state without flooding the whole bubble.
Stat tile
98.2%
Glow hierarchy retained.
Confirm mood sync
Modal edges can accept stronger placement when content is calm.
Engineering recipes
Copy the current stroke recipe into a component experiment.
These snippets expose the selected recipe as tokens and component props. They are intentionally local until the global push path is promoted.
/* Google AI Glow Border
Source: https://codepen.io/kevinpowell/pen/WbbXRPL?%3Feditors=1100
Rendering: CSS border-area composition with conic color, a blurred glow layer, and masked edge containment.
*/
.vibe-stroke-google-ai-glow-border {
--stroke-weight: 2.7px;
--stroke-placement: outside;
--stroke-background: conic-gradient(from 180deg at 50% 50%, rgba(255, 79, 216, 0.000) 0%, rgba(255, 79, 216, 0.000) 1%, rgba(154, 104, 255, 0.000) 19%, rgba(154, 104, 255, 0.000) 21%, rgba(63, 232, 255, 0.000) 44%, rgba(63, 232, 255, 0.000) 46%, rgba(102, 255, 252, 0.490) 67%, rgba(102, 255, 252, 0.490) 69%, rgba(255, 198, 77, 0.990) 88%, rgba(255, 198, 77, 0.990) 90%, rgba(255, 79, 216, 1.000) 99%, rgba(255, 79, 216, 1.000) 100%, rgba(255, 79, 216, 0.000) 100%);
--stroke-opacity: 1.00;
--stroke-strength: 0.92;
--stroke-speed: 6.22s;
--stroke-glow-handling: outside;
--stroke-glow-strength: 0.92;
--stroke-glow-width: 38px;
--stroke-glow-placement: both;
}<StrokeFrame
recipe={strokeRecipes["google-ai-glow-border"]}
config={{
weight: 2.7,
placement: "outside",
colorMode: "gradient",
gradientType: "angular",
gradientStops: [{"color":"#ff4fd8","position":0,"opacity":0},{"color":"#9a68ff","position":20,"opacity":0},{"color":"#3fe8ff","position":45,"opacity":0},{"color":"#66fffc","position":68,"opacity":49},{"color":"#ffc64d","position":89,"opacity":99},{"color":"#ff4fd8","position":100,"opacity":100}],
opacity: 100,
speed: 54,
strength: 92,
glowHandling: "outside",
glowStrength: 92,
glowWidth: 38,
glowPlacement: "both",
outsideGlowIntensity: 82,
insideGlowIntensity: 58
}}
>
<YourComponent />
</StrokeFrame>Placement notes
Position support depends on the reference structure.
The lab exposes Inside, Center, and Outside, but recipes can disable placements that would damage the original effect.
inside
Google AI Glow Border supports inside placement without breaking its edge model.
center
Google AI Glow Border supports center placement without breaking its edge model.
outside
Google AI Glow Border supports outside placement without breaking its edge model.
Reference audit
Google AI Glow Border
- Render method
- CSS border-area composition with conic color, a blurred glow layer, and masked edge containment.
- Glow logic
- Broad luminous bloom behind a thin edge, with the glow allowed to breathe without becoming a thick stroke.
- Motion
- Always-on ambient conic travel with a slow pulse.
Vibe Layer handoff
Use selected Vibe colors without flattening the stroke recipe.
The handoff replaces color values only. Stop positions, per-stop opacity, glow placement, timing, weight, blur, and recipe identity remain untouched.
This gradient contains 6 custom stops, so replacement requires confirmation.
Optional global push
Global application is scaffolded, not forced.
This pass keeps experimentation local to Stroke Lab. The payload below is the intended handoff shape for a later shared-token promotion.
{
"recipe": "google-ai-glow-border",
"placement": "outside",
"weight": 2.7,
"colorMode": "gradient",
"gradientType": "angular",
"opacity": 100,
"speed": 54,
"strength": 92,
"glowHandling": "outside",
"glowStrength": 92,
"glowWidth": 38,
"glowPlacement": "both",
"outsideGlowIntensity": 82,
"outsideGlowBlur": 38,
"insideGlowIntensity": 58,
"insideGlowBlur": 20
}