Example Gallery

Example Gallery

Every example in examples/blinc_app_examples/examples/ that follows the cross-target convention is auto-built for the web target by tools/build-web-examples and embedded below. The same build_ui function that runs on desktop, iOS, and Android runs here — no per-target forks. See the Contributing → Examples page for the convention that makes this work.

Click any card to open the example in a focused view with a lazy-loaded iframe. Each demo spawns its own WebGPU context, so loading more than ~8 at once will start hitting Chrome's per-tab GPU context limit — the per-example pages keep that manageable.

Examples

• Canvas Element — This example demonstrates the canvas element for custom GPU drawing
• Canvas Kit Interactive — Demonstrates blinc_canvas_kit features:
• Carousel Demo - Selector API Showcase — Demonstrates the new selector API features:
• Chrome-Style Tabs — Demonstrates the notch element in "reverse" mode: instead of a dropdown
• blinc_cn Components — Showcases all available blinc_cn components in a scrollable grid layout.
• Code Element — Demonstrates both read-only code display and editable code editor.
• Complex SVG — Displays an SVG at various sizes to test rasterization quality,
• CSS Debug — Tests three known CSS issues:
• CSS Visual Features — Showcases newly added CSS visual features:
• Layer Effects — Showcases GPU-accelerated layer effects including:
• Emoji and HTML Entities — This example demonstrates:
• @flow Shader — Demonstrates the @flow DAG-based shader system.
• Fluid Surface — Combines @flow GPU shaders with pointer-query CSS-driven interaction.
• Skeleton animation with glTF + blinc_canvas_kit. — Loads Sketchfab's buster_drone (39 meshes, 92 nodes, one 25-second
• DrawContext::run_gpu_pass end-to-end demo. — Shows the same pattern a user would reach for if they wanted to
• Image CSS Styling — Demonstrates CSS properties that work on images via stylesheets:
• Image Layer Test — Tests the rendering order of images vs primitives (paths, backgrounds).
• Keyframe Animation Canvas — Demonstrates keyframe animations with the canvas element for:
• Markdown Editor — A split-view markdown editor with:
• 3D Mesh Demo — renders the Khronos glTF DamagedHelmet sample model — Demonstrates:
• Motion Demo — Auto-built from the cross-target source.
• Music Player Glass Card — Recreates an iOS-style "Now Playing" music player card with liquid glass
• Node-editor demo — pre-wired graph with three node types, typed — What it shows:
• Notch Menu Bar — Demonstrates a macOS-style menu bar with a notched dropdown that
• Overflow Fade — Demonstrates the overflow-fade CSS property which applies smooth alpha
• Overlay System — This example demonstrates the overlay infrastructure for modals, dialogs,
• Pointer Query — Demonstrates the CSS-driven continuous pointer query system.
• Rich Text Element — This example demonstrates the rich_text element for inline text formatting
• Rich Text Editor — Full editable rich text editor with cursor, selection, and inline
• Scroll Container — This example demonstrates the scroll widget with opt-in webkit-style
• Semantic @flow — Demonstrates the semantic step/chain/use system for @flow shaders.
• Sortable — Demonstrates drag-based interactions using FSM-driven stateful containers:
• Stateful API + Signal-bound modifiers demo. — Two complementary examples:
• End-to-end 3D demo wiring Blinc's SceneKit3D renderer up to — dispatch front-end used by any Blinc app that wants to drop
• Unified Styling API — Demonstrates all styling approaches in Blinc:
• SVG Animation — Demonstrates SVG animation capabilities:
• Table Builder — This example demonstrates the TableBuilder API for declarative table creation.
• Tabler Icons — Showcases outline and filled icons from the blinc_tabler_icons crate.
• Minimal text positioning test — Tests that text is correctly centered within parent containers.
• Text Input Widgets — Demonstrates ready-to-use text input and text area elements using the layout API.
• KHR_texture_transform — Loads Poly Haven's marble_cliff_02 asset (CC0) — a displaced
• Theme System — This example demonstrates the Blinc theming system capabilities:
• Timeline Animation — This example demonstrates timeline-based animations using the stateful API:
• Typography — This example demonstrates typography helpers:
• Video Player — Demonstrates the video_player widget with blinc_media::VideoPlayer instance and controls.
• Wet Glass — Procedural wet-window effect with real light refraction through water drops.
• Windowed Application — This example demonstrates how to create a windowed Blinc application