Card Layouts

Six different card layout patterns commonly used in web interfaces, each demonstrating a distinct visual structure and use case.

01 / Horizontal Card
IMAGE

WebGL Shader Collection

A curated set of fragment shaders for post-processing effects including bloom, chromatic aberration, and film grain.

Updated 3 days ago
IMAGE

Audio Visualization Toolkit

Connect Web Audio API analyzers to canvas renderers with configurable frequency-to-visual mappings.

Updated 1 week ago
02 / Vertical Card
IMAGE

Procedural Terrain

Generate infinite landscapes with layered Perlin noise and biome classification.

procedural
IMAGE

Particle Physics

Real-time particle simulation with gravity, collisions, and spring constraints.

simulation
IMAGE

CSS Grid Art

Creating artwork using only CSS Grid properties and background gradients.

css
03 / Overlay Card

Generative Art Series

Algorithmic compositions exploring chaos and order

Data Landscapes

Terrain rendered from real-world datasets

Fluid Dynamics

Navier-Stokes solver running in WebGL

04 / Profile Card
AK

Aiko Kuroda

Frontend Engineer
142
Projects
2.8k
Commits
98%
Score
TM

Taro Murakami

Systems Architect
89
Projects
5.1k
Commits
96%
Score
YS

Yuki Sato

Creative Developer
215
Projects
3.4k
Commits
99%
Score
05 / Pricing Card

Starter

$0
/ month
  • 3 projects
  • 1 GB storage
  • Community support
  • Basic analytics

Enterprise

$99
/ month
  • Everything in Pro
  • Unlimited storage
  • Dedicated support
  • SSO / SAML
  • SLA guarantee
06 / Stat Card
12,847
Page Views
+18.2% vs last week
3.4s
Avg. Load Time
+0.8s slower
64%
Bounce Rate
No change
$4,210
Revenue
+7.3% this month
← デモ一覧に戻る