Blinc CSS Styling System - A Complete GPU-Accelerated CSS Engine for Rust

[darmie]

A complete, GPU-accelerated CSS engine for Rust — from selectors to 3D shapes to procedural shaders

---

Blinc now ships a full CSS styling engine that brings familiar web CSS syntax to native Rust UI, with capabilities that go well beyond what browsers offer. Every visual property, animation, and effect runs on the GPU through our SDF-based rendering pipeline.

Three Ways to Style

Blinc supports three composable styling approaches that work together seamlessly:

1. Global Stylesheets (Recommended)

ctx.add_css("
    #card {
        background: linear-gradient(135deg, #667eea, #764ba2);
        corner-radius: 16px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        transition: scale 0.3s ease, box-shadow 0.3s ease;
    }
    #card:hover {
        scale: 1.05;
        box-shadow: 0 12px 48px rgba(102, 126, 234, 0.4);
    }
");

2. Scoped Macros (css! / style!)

let card_style = css! {
    background: linear-gradient(135deg, #667eea, #764ba2);
    corner-radius: 16px;
    opacity: if is_visible { 1.0 } else { 0.0 };
};

3. Builder API

Div::new("card")
    .w(300.0).h(200.0)
    .bg(Color::hex("#667eea"))
    .corner_radius(16.0)
    .shadow(0.0, 8.0, 32.0, Color::rgba(0, 0, 0, 0.3))

All three compose together seamlessly — use stylesheets for shared design, macros for dynamic logic, and builders for one-off elements.

---

Full CSS Selector Support

The selector engine matches the CSS spec with full specificity calculation:

• Simple: #id, .class, *
• Pseudo-classes: :hover, :active, :focus, :disabled, :checked
• Structural: :first-child, :last-child, :nth-child(N), :only-child, :nth-of-type(N), :empty
• Functional: :not(), :is(), :where()
• Pseudo-elements: ::placeholder, ::selection
• Combinators: child (>), descendant (space), adjacent sibling (+), general sibling (~)
• Compound: .card.highlighted:hover > .title:first-child

---

Animations & Transitions

CSS Transitions

Smooth property interpolation on any state change:

#card {
    background: #1e293b;
    transform: scale(1.0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
#card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.5);
    background: #334155;
}

@Keyframes Animations

Multi-step animations with full keyframe control:

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.05); }
}
#badge { animation: pulse 2s ease-in-out infinite; }

Animatable Properties

opacity, background (including gradient interpolation), border-color, border-width, corner-radius, corner-shape, box-shadow, text-shadow, transforms (rotate, scale, translate, skew), 3D transforms (rotate-x, rotate-y, translate-z), clip-path, mask-image, CSS filters, width, height, padding, margin, gap, overflow-fade, SVG fill/stroke/stroke-dashoffset/path d — and more.

FLIP Layout Animations

Automatic position animation when elements reorder or change layout. Any element with a CSS transition on transform will smoothly animate to its new position after a layout change — no extra configuration needed:

.sort-item {
    transition: transform 200ms ease;
}

---

Filters & Backdrop Effects

CSS Filters

#photo {
    filter: grayscale(50%) brightness(120%) contrast(110%);
    transition: filter 0.4s ease;
}
#photo:hover {
    filter: blur(8px);
}

Supported: blur, grayscale, sepia, invert, brightness, contrast, saturate, hue-rotate

Backdrop Filters & Materials

#glass-card {
    backdrop-filter: blur(12px) saturate(180%) brightness(80%);
    background: rgba(255, 255, 255, 0.15);
}

Named materials for common effects:

#panel { backdrop-filter: glass; }
#header { backdrop-filter: metallic; }
#trim { backdrop-filter: chrome; }

Liquid Glass

Advanced refraction with bevel borders, as seen in the music player demo:

#card {
    backdrop-filter: liquid-glass(
        blur(18px)
        saturate(180%)
        brightness(120%)
        border(4.0)
        tint(rgba(255, 255, 255, 1.0))
    );
}

---

Clip Path & Masks

clip-path

Full spec support — circle, ellipse, inset, rect, xywh, polygon, and SVG path:

#hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
#rounded { clip-path: inset(10% 10% 10% 10% round 12px); }
#organic { clip-path: path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); }

Clip paths are fully animatable:

@keyframes clip-reveal {
    from { clip-path: inset(0% 50% 100% 50%); }
    to   { clip-path: inset(0% 0% 0% 0%); }
}

mask-image

Gradient-based masks with luminance or alpha modes:

#fade-reveal {
    mask-image: linear-gradient(to bottom, black 60%, transparent);
    transition: mask-image 0.6s ease;
}
#fade-reveal:hover {
    mask-image: linear-gradient(to bottom, black, black);
}

---

3D Shapes & Lighting

Native SDF-based 3D rendering — no meshes, no WebGL. Define 3D shapes in CSS and they're raymarched in the fragment shader with Blinn-Phong lighting:

#sphere {
    shape-3d: sphere;
    depth: 120px;
    perspective: 800px;
    rotate-x: 30deg;
    rotate-y: 45deg;
    light-direction: (0.0, -1.0, 0.5);
    light-intensity: 1.5;
    ambient: 0.3;
    specular: 64.0;
    background: linear-gradient(45deg, #4488ff, #ff4488);
}

Shapes: box, sphere, cylinder, torus, capsule

Boolean Operations for compound shapes:

#compound { shape-3d: group; perspective: 800px; depth: 80px; }
#base     { shape-3d: box; 3d-op: union; }
#hole     { shape-3d: cylinder; 3d-op: subtract; 3d-blend: 30px; }

Operations: union, subtract, intersect, smooth-union, smooth-subtract, smooth-intersect

UV-mapped backgrounds automatically wrap onto 3D surfaces — gradients, solid colors, all projected per-shape type.

---

@flow — GPU Procedural Shaders in CSS

Define custom GPU fragment shaders as composable DAG pipelines directly in your stylesheet. No WGSL, no shader files — semantic steps that compile to GPU code:

@flow ripple {
    target: fragment;
    input uv: builtin(uv);
    input time: builtin(time);

    node centered = uv - vec2(0.5, 0.5);
    node dist = length(centered);
    node wave = sin(dist * 30.0 - time * 4.0) * 0.5 + 0.5;
    node falloff = smoothstep(0.5, 0.0, dist);
    node intensity = wave * falloff;

    output color = vec4(intensity * 0.3, intensity * 0.6, intensity, intensity * 0.9);
}

#my-element { flow: ripple; }

Semantic Steps

High-level operations that expand to GPU code automatically:

@flow wetglass {
    target: fragment;
    input uv: builtin(uv);
    input time: builtin(time);
    input resolution: builtin(resolution);

    /* Moisture field (evolves slowly) */
    step mist: pattern-noise { scale: 3.0; detail: 5; animation: time * 0.02; }
    node grav = smoothstep(0.0, 1.0, uv.y);
    node moist = mist * (0.35 + grav * 0.65);

    /* Animated wetness UVs — gravity scroll */
    step uv1: transform-wet { speed: 0.001; }
    step uv2: transform-wet { speed: 0.0015; offset: vec2(0.38, 0.21); }

    /* Drop layers at different scales */
    step drops1: pattern-worley {
        uv: uv1; scale: 7.0; threshold: 0.22; edge: 0.05;
        mask: step(0.30, moist);
    }
    step drops2: pattern-worley {
        uv: uv2; scale: 12.0; threshold: 0.18; edge: 0.04;
        mask: step(0.20, moist);
    }

    node drops = smoothstep(0.05, 0.4, clamp(drops1 + drops2 * 0.6, 0.0, 1.0));

    /* Refraction inside drops */
    step lens: effect-frost { strength: 0.025; mask: drops; scale: 12.0; }

    /* Directional light glints */
    step highlight: effect-light {
        sources: drops1, drops2;
        weights: 1.0, 0.6;
        angle: 225.0; shininess: 64.0; intensity: 0.25;
        mask: drops;
    }

    node scene = sample_scene(uv + lens);
    node fog = (1.0 - drops) * (0.12 + mist * 0.05);
    output color = vec4(
        scene.x * (1.0 - fog) + fog + highlight,
        scene.y * (1.0 - fog) + fog + highlight,
        scene.z * (1.0 - fog) + fog + highlight,
        0.97
    );
}

Available Step Types

Category	Steps
Patterns	pattern-noise (FBM), pattern-worley (cellular), pattern-ripple, pattern-waves, pattern-grid, pattern-gradient, pattern-plasma
Effects	effect-refract, effect-frost, effect-specular, effect-fog, effect-light
Transforms	transform-wet, transform-warp, transform-rotate, transform-scale, transform-tile, transform-mirror, transform-polar
Color	color-ramp, color-shift, color-tint, color-invert
Composition	compose-blend, adjust-falloff

Flows also compose via use other_flow; and can be applied with CSS (flow: name), the flow! macro, or the builder (.flow("name")).

---

Pointer Query System

CSS-driven continuous pointer interaction — no event handlers needed. Set pointer-space: self on any element and its CSS properties can react to the pointer in real time with exponential smoothing:

#tilt-card {
    pointer-space: self;
    pointer-origin: center;
    pointer-range: -1.0 1.0;
    pointer-smoothing: 0.08;

    perspective: 800px;
    rotate-y: calc(env(pointer-x) * env(pointer-inside) * 25deg);
    rotate-x: calc(env(pointer-y) * env(pointer-inside) * -25deg);
    box-shadow: calc(env(pointer-x) * -20px) calc(env(pointer-y) * 20px) 40px rgba(0,0,0,0.3);
}

Environment Variables

Variable	Description
env(pointer-x), env(pointer-y)	Normalized position within element bounds
env(pointer-vx), env(pointer-vy)	Velocity of pointer movement
env(pointer-speed)	Absolute speed of pointer
env(pointer-distance)	Distance from pointer origin
env(pointer-angle)	Angle from origin to pointer
env(pointer-inside)	1.0 when pointer is over element, 0.0 otherwise
env(pointer-active)	1.0 when pressed/clicked
env(pointer-pressure)	Touch pressure (0.0–1.0), binary for mouse
env(pointer-hover-duration)	Seconds the pointer has been hovering
env(pointer-touch-count)	Number of active touch points

Extended Math Functions

opacity: calc(mix(0.3, 1.0, env(pointer-inside)));
border-radius: calc(remap(env(pointer-distance), 0.0, 1.0, 8.0, 32.0) * 1px);
scale: calc(1.0 + smoothstep(0.0, 0.5, env(pointer-distance)) * 0.2);
opacity: calc(step(0.5, env(pointer-inside)));

Functions: min(), max(), clamp(), mix(), smoothstep(), step(), remap()

---

SVG Animation

Animate SVG sub-elements with tag-name selectors — fill, stroke, dash effects, and path morphing:

/* Color cycling */
@keyframes color-cycle {
    0%   { fill: #ef4444; stroke: #dc2626; }
    33%  { fill: #3b82f6; stroke: #2563eb; }
    66%  { fill: #10b981; stroke: #059669; }
    100% { fill: #ef4444; stroke: #dc2626; }
}
#icon { animation: color-cycle 4s ease-in-out infinite; }

/* Line drawing */
#draw-svg {
    stroke-dasharray: 251;
    stroke-dashoffset: 251;
    animation: draw 3s ease-in-out infinite alternate;
}
@keyframes draw {
    to { stroke-dashoffset: 0; }
}

/* Path morphing (hamburger → X) */
@keyframes hamburger-morph {
    0%   { d: path("M20,30 L80,30 M20,50 L80,50 M20,70 L80,70"); }
    100% { d: path("M26,26 L74,74 M50,50 L50,50 M26,74 L74,26"); }
}

/* Tag-name selectors */
#my-svg path   { stroke: #8b5cf6; stroke-width: 5; }
#my-svg circle { fill: #f3e8ff; stroke: #a78bfa; }
#my-svg rect   { fill: #fef3c7; stroke: #f59e0b; }

---

Corner Shape & Overflow Fade

Superellipse Corners

#squircle {
    corner-radius: 20px;
    corner-shape: 2;        /* squircle */
}
#bevel   { corner-shape: 0; }
#scoop   { corner-shape: -1; }
#notch   { corner-shape: -100; }

Overflow Fade

Smooth alpha fading at overflow edges instead of hard clips:

#scrollable {
    overflow: clip;
    overflow-fade: 24px;
    overflow-fade-direction: vertical;
}

/* Animated */
@keyframes fade-breathe {
    0%   { overflow-fade: 0px; }
    50%  { overflow-fade: 40px; }
    100% { overflow-fade: 0px; }
}

---

Layout

Complete flexbox support styled through CSS:

#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
}
#item {
    width: 200px;
    height: auto;
    min-height: 100px;
    flex-grow: 1;
    align-self: stretch;
}

Positioning: absolute, relative, fixed, sticky with top/right/bottom/left/inset.

---

Theme System

Design tokens for consistent styling with light/dark mode support:

#card {
    background: theme(surface);
    color: theme(text-primary);
    corner-radius: theme(radius-lg);
    box-shadow: theme(shadow-md);
}

Tokens cover colors (primary, secondary, success, warning, error, surface, text, border), radii, and shadows.

---

Widget Styling

Built-in widgets respect the CSS cascade:

#my-checkbox {
    accent-color: #3b82f6;
    border: 2px solid #64748b;
    corner-radius: 4px;
}
#my-checkbox:checked {
    background: #3b82f6;
    border-color: #3b82f6;
}
#my-input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
#my-input::placeholder { color: #64748b; }

Additional form properties: caret-color, scrollbar-color, scrollbar-width, accent-color.

---

Mix Blend Modes

.overlay { mix-blend-mode: screen; }    /* multiply, overlay, darken, lighten, */
                                         /* difference, exclusion, color-dodge, hard-light */

---

Example Demos

Run any demo with cargo run -p blinc_app --example <name> --features windowed:

Demo	What It Shows
styling_demo	All three styling approaches — css! macro, style! macro, builder, CSS parser
css_features_demo	Mix-blend-mode, pointer-events, cursor, text-decoration, text-overflow
pointer_query_demo	Pointer-reactive 3D tilt cards, distance effects, pressure response
music_player	Liquid glass morphism, gradient animation, hover transitions
svg_animation_demo	SVG color cycling, stroke animation, path morphing, tag-name selectors
wet_glass_demo	Procedural wet-window @flow with water drops, refraction, and specular highlights
image_css_demo	CSS filters, transforms, object-fit/position on images
flow_demo	@flow DAG-based custom GPU shaders defined in CSS
semantic_flow_demo	Composable flow shader chains with noise, color ramps, and effects
overflow_fade_demo	Smooth alpha fading at overflow clip edges, animated fade distance
sortable_demo	Drag-to-reorder with FLIP layout animations and swipe-to-delete

---

What Makes This Different

1. Pure CSS, GPU-accelerated — Every property renders through an SDF pipeline on the GPU. No software rasterization.
2. Pointer Query — Continuous, smoothed pointer interaction as CSS environment variables. No event handler boilerplate.
3. Native 3D — SDF raymarched shapes with Blinn-Phong lighting and boolean operations, defined in CSS.
4. @flow Shaders — Composable GPU fragment shaders as semantic DAG pipelines in your stylesheet. Pattern generators, effects, transforms, and color ramps — all without writing WGSL.
5. Layout Animation — FLIP-based automatic animation when elements change position or size.
6. Cross-platform — Same CSS works on desktop (macOS/Windows/Linux), iOS, and Android.