// Tools

Pinned

• EN/30 — English for Work

  Lộ trình 30 ngày luyện tiếng Anh thực chiến cho công việc — hội thoại, cụm từ, ngữ pháp, quiz, ghi chú, ôn tập giãn cách và theo dõi tiến trình ngay trong trình duyệt.

  english learning work 30-day
• Interior Decorator

  A working 3D room planner: click furniture from a catalog to place it, drag it across the floor, recolor and resize every piece, repaint the room, and slide from noon to midnight — the pattern behind real product configurators.

  threejs 3d project demo
• Stock Chart Patterns

  Interactive gallery of common technical-analysis chart patterns — head & shoulders, double tops, triangles, flags — drawn with neckline, breakout, and target annotations.

  investing charts demo
• Vietlott Mega Draw

  Random number generator for Vietlott 6/45 & 6/55 with animated draw experience.

  random game phaser
• 3D Tilt & Parallax Card

  A pointer-driven tilt card with layered parallax depth — move your mouse to rotate it in 3D, adjust max tilt, perspective, and layer separation, and see the live transform.

  css 3d demo css_3d

• Three.js — Your First Scene

  Interactive first Three.js scene — orbit a live cube while the three pillars (Scene, Camera, Renderer) report draw calls, FOV, and FPS in real time. Toggle wireframe, axes, and grid helpers.

  threejs 3d webgl demo
• Three.js — Geometries & Materials

  Swap built-in geometries (box, sphere, torus knot, icosahedron…) against every material type (Basic, Lambert, Phong, Standard, Physical, Normal) and watch metalness, roughness, color, and lighting change the surface live.

  threejs 3d materials demo
• Three.js — Scene Graph & Cameras

  A sun→earth→moon hierarchy that proves children inherit their parent transform — rotate the sun and the whole system follows. Switch between Perspective and Orthographic cameras to feel the projection difference.

  threejs 3d scene-graph demo
• Three.js — Lights & Shadows

  Swap Directional, Point, Spot, and Hemisphere lights, drive intensity and position, and toggle real-time shadow maps on a ground plane — with light helpers and a live draw-call readout so you feel the cost.

  threejs 3d lighting demo
• Three.js — PBR Textures & Environment

  Toggle PBR texture maps (base color, normal, roughness) on a live sphere and add a procedural environment so metal actually reflects — every texture generated in code, no downloads. Drive metalness, roughness, and tiling.

  threejs 3d pbr demo
• Three.js — Animation System

  See how AnimationMixer, AnimationClip, and AnimationActions fit together: crossfade between hand-built clips (bounce, spin, pulse), scrub time scale, and watch mixer time advance — the same API that plays glTF character animations.

  threejs 3d animation demo
• Three.js — Post-Processing & Bloom

  Render the scene through an EffectComposer chain (RenderPass → UnrealBloom → Output) and watch emissive surfaces glow. Drive bloom strength, radius, and threshold to control exactly what blooms — the cinematic-polish layer.

  threejs 3d post-processing demo
• Three.js — Instancing & Performance

  The same thousands of cubes drawn two ways: one InstancedMesh (a single draw call) versus N separate meshes (one call each). Push the count and switch modes to watch draw calls and FPS diverge in real time.

  threejs 3d performance demo
• Three.js — Raycasting & Interaction

  Make a 3D scene clickable: a Raycaster shoots from the camera through the mouse to pick objects. Hover to highlight, click to select, and read the live hit (object, distance, world point) — the basis of every 3D UI.

  threejs 3d interaction demo
• Three.js — Capstone Solar System

  The whole series in one scene: a loading screen, a bloom-lit emissive sun, an instanced asteroid belt (one draw call), click-to-select planets via raycasting, ResizeObserver responsiveness, and a live renderer.info debug HUD.

  threejs 3d capstone demo
• Three.js — Custom GLSL Shaders

  Drop below the built-in materials and write the GPU program yourself: a ShaderMaterial with a vertex displacement shader and a fragment color shader, driven live through uniforms — displacement, frequency, and time, all from JS.

  threejs 3d glsl shaders demo
• Three.js — Physics Sandbox

  Two parallel worlds kept in sync: Three.js meshes for rendering and cannon-es rigid bodies for simulation. Click the floor to drop boxes and spheres, watch them collide and stack, and drive gravity and restitution live.

  threejs 3d physics demo
• Three.js — glTF Import Inspector

  Load pinned Khronos sample assets, inspect mesh/material/triangle counts, switch wireframe and environment lighting, and see how a glTF scene maps into Three.js objects.

  threejs 3d gltf assets demo
• Three.js — Rigging & Animation

  Drive a skinned glTF character through locomotion cross-fades, one-shot emotes, time scaling and facial morph targets with AnimationMixer.

  threejs 3d animation rigging demo
• Three.js — Character Interaction

  Raycast from pointer intent into a 3D world, click the ground to walk or run, trigger emotes, and coordinate animation through a guarded state controller.

  threejs 3d interaction animation demo
• Three.js — Spatial Math Lab

  Trace a point through local, world, view, clip, NDC and screen spaces; compare Euler and quaternion interpolation; unproject pointer input and expose floating-point precision loss.

  threejs 3d math coordinates precision
• Three.js — Depth & Transparency Lab

  Inject z-fighting and transparency failures, toggle depth test/write, alpha test/hash/blend and render order, then see the draw-call cost of an intermediate render target.

  threejs 3d rendering depth transparency
• Three.js — Runtime Lifecycle Lab

  Stress managed versus naïve mount cycles, asset races, fixed-step simulation, resource ownership and context loss while lifecycle counters reveal leaks and stale work.

  threejs 3d architecture lifecycle resources
• Three.js — Frame Budget Lab

  Separate draw-call, vertex, fragment/overdraw and upload pressure with deterministic workloads, p50/p95 frame time, GPU timer fallback and adaptive-quality controls.

  threejs 3d performance gpu profiling
• Three.js — Asset Pipeline Gate

  Evaluate a versioned glTF manifest against device-tier budgets, coordinate and naming contracts, slot-aware KTX2 policy, immutable hashes, license and provenance rules.

  threejs 3d gltf ci assets
• Three.js — Resilience Workbench

  Inject network, decode, stale-response and WebGL context failures; recover through explicit states while a semantic DOM twin keeps the 3D experience keyboard-accessible.

  threejs 3d testing accessibility resilience
• Three.js — WebGPU & TSL Migration Lab

  Run the same TSL node material on WebGPU or the WebGL 2 backend, inspect the actual backend, change quality policy and exercise async renderer initialization and fallback UI.

  threejs 3d webgpu tsl architecture
• Landing Animation Lab

  Live lab of landing-page & component animation techniques — page-load orchestration, scroll reveal, stagger, text reveal, parallax, magnetic hover, gestures, page transitions, reduced motion.

  animation ux react demo
• iOS Video Playback Lab

  Toggle playsinline, muted, autoplay, loop & controls on a live <video> and watch the generated tag, playback status, and an event log — including the iOS fullscreen takeover and the rejected play() promise.

  ios video demo
• Workflow Canvas Demo

  Interactive workflow editor with draggable HTML nodes and canvas bezier edges. Demo for HTML-in-Canvas blog post.

  canvas workflow demo
• Placeholder & Skeleton Demo

  Interactive demo of loading placeholders: spinner vs skeleton vs blur-up, the flash problem, and page-level loading islands.

  ux loading demo
• Generators & yield Demo

  Step through a generator with .next(), watch a lazy filter→map→take pipeline, and race a blocking loop against cooperative scheduling.

  javascript generators demo
• Modern CSS Features Demo

  Live examples of container queries, :has(), <dialog>, the Popover API, scroll-driven animations, and color-mix().

  css web-platform demo
• Cookie Playground & Security Demo

  Set, read, and delete cookies with real attributes, see why HttpOnly defeats XSS, compare storage, and explore SameSite/CSRF.

  security cookies demo
• CORS Request Inspector

  Configure a cross-origin request and see if it is simple or preflighted, the generated OPTIONS, required response headers, and what bypasses CORS.

  cors http demo
• CORS Decision Flow

  An html-in-canvas flowchart that lights up the path the browser takes to decide if your JS can read a response — READ, BLOCKED, or OPAQUE.

  cors canvas demo

Vite Zero to Pro · vite_12

• Vite vs Bundler Startup Race

  Drag the project size and race a bundler against Vite’s native-ESM dev server — watch the bundler’s startup grow with the app while Vite stays nearly flat, and see why production still bundles.

  vite esm dev-server demo vite_12
• vite.config.ts Builder

  Toggle the options you actually reach for — framework plugin, base, alias, server proxy, build/sourcemap, define — and watch a real, idiomatic vite.config.ts assemble itself field by field.

  vite config demo vite_12
• On-Demand ESM Requests

  Open a route and watch the browser pull modules one request at a time as Vite rewrites each import into a fetchable URL — then navigate and see only the new modules load.

  vite esm dev-server demo vite_12
• Dependency Pre-bundling

  Run the pre-bundle step and watch hundreds of node_modules files collapse into a few cached .vite/deps files, with CommonJS converted to ESM — plus optimizeDeps include/exclude and the cache-clear fix.

  vite optimizeDeps performance demo vite_12
• HMR Boundary Lab

  Build up counter state, then edit a CSS file, a leaf component, and a shared util to feel the difference between a hot module swap (state preserved) and a full reload (state lost) — with the import.meta.hot API.

  vite hmr demo vite_12
• CSS Pipeline Explorer

  Compare plain CSS, scoped CSS Modules, Sass/SCSS, the ?inline query, and PostCSS — see what you import on the left and exactly what Vite produces (global vs hashed-and-scoped) on the right.

  vite css css-modules demo vite_12
• Asset Imports Explorer

  Expand each asset import form — default URL, ?url, ?raw, ?worker, and import.meta.glob — to see what it returns and when to reach for it, plus public/ vs imported assets.

  vite assets glob demo vite_12
• Env Vars & Modes Resolver

  Pick a mode to see which .env files load and in what priority, then study the VITE_ prefix gate that decides which variables reach the client bundle — the rule that keeps secrets out of the browser.

  vite env security demo vite_12
• Plugin Hook Timeline

  Run a module through the plugin pipeline and watch the hooks light up in order (resolveId → load → transform and friends), then read a working virtual-module plugin you can copy.

  vite plugins rollup demo vite_12
• Build Output Explorer

  Toggle vendor splitting, a lazy route, and source maps to watch the dist/ structure and chunking change — see how much JS the browser loads initially vs on navigation, with the Rolldown chunk config.

  vite build rolldown demo vite_12
• Library Mode & Environments

  Pick library output formats (ESM/CJS/types) and externalized peer deps to build the config and package.json exports map, then explore the multi-environment SSR model behind the Environment API.

  vite library ssr demo vite_12
• Capstone Config & Migration

  Assemble a production-grade vite.config.ts from the whole series and score its readiness, then switch to the migration tab to map every Webpack/CRA concept to its Vite equivalent.

  vite capstone migration demo vite_12

Webpack Zero to Pro · webpack_12

• Dependency Graph Explorer

  Watch Webpack crawl from one entry file through every import to build the dependency graph, then bundle it into output chunks — the core mental model behind every bundler.

  webpack bundler demo webpack_12
• webpack.config.js Builder

  Toggle entry, output, mode, devtool, loaders, and plugins and watch a valid webpack.config.js assemble itself key by key, with each field explained as you add it.

  webpack config demo webpack_12
• Loader Pipeline Visualizer

  Feed a file through a loader chain and watch the transform run right-to-left (sass-loader → css-loader → style-loader), seeing the source change at every step.

  webpack loaders demo webpack_12
• Plugin Lifecycle Inspector

  Fire a build and watch plugins tap into compiler hooks (compile, emit, done) in order — see exactly when HtmlWebpackPlugin, DefinePlugin, and friends do their work.

  webpack plugins demo webpack_12
• HMR & Source Maps Lab

  Compare a full reload against hot module replacement preserving state, then weigh each devtool option on the build-speed vs map-quality trade-off.

  webpack hmr source-maps demo webpack_12
• Code Splitting Visualizer

  Turn one giant bundle into an entry chunk plus lazy-loaded route chunks and a shared vendor chunk — click routes to fetch chunks on demand and watch initial load shrink.

  webpack code-splitting demo webpack_12
• Tree Shaking Visualizer

  Import one named export and watch dead code get marked and dropped in production mode — see why ESM, sideEffects:false, and mode:production are all required.

  webpack tree-shaking demo webpack_12
• Contenthash Cache Simulator

  Edit one module and watch only the chunks whose content changed get new [contenthash] filenames — the long-term caching trick, plus why runtimeChunk keeps hashes stable.

  webpack caching demo webpack_12
• Bundle Analyzer Treemap

  A clickable analyzer treemap — fix the usual offenders (full moment, full lodash, duplicate deps) and watch the bundle drop from over-budget red to within-budget green.

  webpack performance analysis demo webpack_12
• Custom Loader & Plugin Lab

  Run a tiny custom loader on real input and toggle its options to watch the output change, then read a working custom-plugin skeleton tapping the done, emit, and compile hooks.

  webpack loaders plugins demo webpack_12
• Module Federation Visualizer

  A host loads modules from independent remotes at runtime — click exposed modules to federate them in, and toggle shared to see React deduped into a single singleton copy.

  webpack module-federation micro-frontends demo webpack_12
• Production Config Capstone

  Toggle every technique from the series — mode, contenthash, splitChunks, CSS extraction, source maps, budgets, caching — to assemble a real production config and score its readiness.

  webpack production capstone demo webpack_12

Build Chrome Extensions · chrome_ext_12

• Extension Anatomy Explorer

  Click through the four pieces of a Manifest V3 extension — popup, content script, service worker, options page — and see what each one is, where it runs, and what it can touch.

  chrome-extension manifest-v3 demo chrome_ext_12
• manifest.json Builder

  Toggle features (popup, content scripts, background, options, side panel, commands, permissions) and watch a valid manifest.json assemble itself key by key, with each field explained.

  chrome-extension manifest demo chrome_ext_12
• Architecture & Context Map

  A capability matrix across the four contexts plus a play-able data-flow (popup → worker → content → page) — the distributed-system mental model that makes everything else click.

  chrome-extension architecture demo chrome_ext_12
• Content Script Lab

  Tune match patterns and run_at, watch a script inject (or not) into a fake page, and prove the isolated world by setting a variable the page can never see.

  chrome-extension content-script demo chrome_ext_12
• Service Worker Lifecycle

  Fire events and watch the MV3 background wake, idle, and terminate — and see exactly why an in-memory counter resets while chrome.storage survives.

  chrome-extension service-worker demo chrome_ext_12
• Messaging Playground

  Compare one-shot sendMessage with a long-lived connect port, animate packets across contexts, and read the code each messaging style generates.

  chrome-extension messaging demo chrome_ext_12
• chrome.storage Explorer

  Set and remove keys across local/sync/session, watch the quota bar fill toward each area’s limit, and see the onChanged event fire — the reactive cross-context pattern.

  chrome-extension storage demo chrome_ext_12
• UI Surfaces Mock Browser

  Open the popup, dock the side panel, take over with the options page, and increment the action badge — feel the difference between every UI surface in one mock browser.

  chrome-extension popup side-panel demo chrome_ext_12
• Permissions Inspector

  Toggle permissions and watch the exact install-time consent warning Chrome shows the user, plus a risk meter — the least-privilege lesson made tangible.

  chrome-extension permissions security demo chrome_ext_12
• Chrome API Explorer

  tabs, scripting, contextMenus, commands, and notifications — read each snippet then run a simulated version (invert a page, right-click a custom menu, fire a shortcut, pop a notification).

  chrome-extension tabs scripting demo chrome_ext_12
• Build Pipeline Visualizer

  Watch Vite + CRXJS turn TypeScript/React source into a loadable dist/, then save an edit and see HMR hot-reload only the popup — why plain files stop scaling.

  chrome-extension vite tooling demo chrome_ext_12
• Publish Checklist & Capstone

  Tick the exact ship checklist from built dist/ to a live Web Store listing and watch progress fill, then study the capstone “Reading Ruler” map wiring every part of the series together.

  chrome-extension publishing capstone demo chrome_ext_12

Tailwind, Radix & shadcn/ui · tailwind_ui_14

• Tailwind v4 Cheatsheet

  A compact Tailwind v4 utility and @theme token reference: layout, flex/grid, spacing, sizing, typography, colors, effects, filters, transforms, SVG, and design-token namespaces in one searchable-feeling tabbed panel.

  tailwind cheatsheet design-tokens reference tailwind_ui_14
• Tailwind Utility-First Playground

  Compose a component by toggling utilities and watch the class="" string build up alongside the exact plain CSS Tailwind generates — the whole utility-first mental model made visible.

  tailwind css demo tailwind_ui_12
• Tailwind Flexbox & Grid Builder

  Toggle Flexbox and Grid utilities on a live container, then shrink the viewport to watch a md: responsive override activate and read the generated @media block.

  tailwind layout responsive demo tailwind_ui_12
• Tailwind v4 @theme Token Studio

  Change a design token (brand color, radius, base size) and watch the live UI, the @theme block, and the utilities it auto-generates update together — plus a light/dark mode toggle.

  tailwind design-tokens theming demo tailwind_ui_12
• Tailwind Variants & State Explorer

  Interact with real elements to fire each variant: hover/focus/active/disabled, group-* (parent state), peer-* (sibling state), and the data-[state] pattern Radix and shadcn rely on.

  tailwind variants state demo tailwind_ui_12
• cva + cn Variant Factory

  Pick a variant and size to see a cva() call resolve to a className exactly like a shadcn Button, then edit an override and watch tailwind-merge strike out the conflicting utilities so the last one wins.

  tailwind cva components demo tailwind_ui_12
• Tailwind Plugin Showcase

  Toggle the three plugins you install in almost every project on and off: @tailwindcss/typography (prose), @tailwindcss/forms, and tw-animate-css enter/exit motion — see exactly what each one changes.

  tailwind plugins typography demo tailwind_ui_12
• Radix Primitives — Anatomy & A11y

  Re-creations of a Radix Dialog and DropdownMenu with real focus trapping, Esc-to-close, return-focus, and full arrow-key navigation — the accessibility Radix gives you for free, styled the Tailwind way.

  radix accessibility demo tailwind_ui_12
• Radix Composition Lab

  Interactive Tabs, Switch, Tooltip, and Popover — each exposing data-state for styling — plus the asChild slot pattern that merges Radix behavior onto your own components without extra wrapper DOM.

  radix composition demo tailwind_ui_12
• shadcn/ui Component Gallery

  The out-of-the-box shadcn look — Button, Badge, Input, Card, Avatar, Alert — built from Tailwind + Radix + cva and copied into your repo, with the exact CLI commands to add them.

  shadcn components demo tailwind_ui_12
• shadcn/ui Theme Generator

  Pick a primary color, radius and light/dark mode and watch shadcn components re-skin live while the :root / .dark CSS-variable blocks update for you to paste — the semantic-token theming model in action.

  shadcn theming dark-mode demo tailwind_ui_12
• shadcn Form Lab — RHF + zod

  One zod schema typing and validating a form: type invalid values and watch field-level errors, isValid, isDirty and the errors object update live — the react-hook-form + zod + shadcn Form pattern.

  shadcn forms zod demo tailwind_ui_12
• shadcn Dashboard — Capstone

  Everything together: a sortable, filterable data table, a ⌘K command palette with keyboard navigation, and stacking toasts — the pro patterns (TanStack Table, cmdk, sonner) in one dashboard.

  shadcn data-table cmdk demo tailwind_ui_12

JavaScript Deep Dive · js_10

• JavaScript Event Loop

  Step through call stack, Web APIs, microtask vs macrotask queues, and console ordering — the production event-loop mental model.

  javascript demo js_10
• Closures, Scope & this

  Lexical environments, closure counters, loop bugs, and binding rules — with live scope inspection.

  javascript demo js_10
• Async Patterns Playground

  Promise combinators, sequential vs parallel pitfalls, AbortController cancellation, and concurrency pools.

  javascript demo js_10
• Debounce, Throttle & rAF

  Compare debounce, throttle, and requestAnimationFrame on scroll/input — leading, trailing, and maxWait behavior.

  javascript demo js_10
• Event Delegation Lab

  One listener vs many, closest() delegation, and DOM batching — see propagation and performance trade-offs.

  javascript demo js_10
• Fetch Resilience Simulator

  Timeouts, retries, exponential backoff, stale-response races, and deduplication — client-side fetch hardening.

  javascript demo js_10
• Error Handling Sandbox

  Sync throws, promise rejections, async/await, Error.cause chains, and global handlers in one iframe sandbox.

  javascript demo js_10
• Form Validation Playground

  Constraint Validation API: ValidityState, setCustomValidity, async cross-field checks, and accessible error UI.

  javascript demo js_10
• Immutability & structuredClone

  Reference vs value, shallow-copy traps, nested mutation, Object.freeze, and change-detection patterns.

  javascript demo js_10
• Intl Formatting Explorer

  Intl.NumberFormat, DateTimeFormat, PluralRules, Collator, and locale-aware sorting — no hand-rolled i18n.

  javascript demo js_10

CSS Deep Dive · css_10

• CSS Grid — Complete Reference

  Every grid property in one interactive lab — track builder, the fr unit, auto-fit/minmax responsive, template-areas presets, alignment matrix, item placement (span/lines/dense), and a full container + item cheat sheet.

  css demo css_10
• Flexbox vs Grid Playground

  Toggle flex vs grid, resize containers, and see axis alignment, fr tracks, and intrinsic sizing live.

  css demo css_10
• Advanced Grid Lab

  auto-fit vs auto-fill, subgrid, dense packing, named areas, and masonry-style layouts.

  css demo css_10
• Container Queries Demo

  @container, container-type, cqi units, and component-local breakpoints — not viewport media queries.

  css demo css_10
• Custom Properties & @property

  Runtime theming, cascade scoping, fallbacks, and typed @property for animatable gradients.

  css demo css_10
• OKLCH & color-mix()

  Perceptually uniform palettes, P3 gamut, relative colors, and HSL vs OKLCH side by side.

  css demo css_10
• Cascade & Specificity

  @layer order, (a,b,c) specificity, :is/:where/:has(), and which rule wins — full resolution order.

  css demo css_10
• Animations & Easing

  Transitions, keyframes, cubic-bezier vs steps, WAAPI, and compositor-friendly motion.

  css demo css_10
• Scroll-Driven Animations

  animation-timeline: scroll() and view(), animation-range, and compositor-native scroll UX without JS.

  css demo css_10
• Stacking Contexts & Anchors

  Paint order, z-index scoping, sticky pitfalls, and CSS anchor positioning for popovers.

  css demo css_10
• Fluid Type clamp() Builder

  Build clamp() type scales, preview at any viewport width, and export copy-paste CSS.

  css demo css_10

CSS Animation · css_10_batch2

• Keyframes & animation Builder

  Live @keyframes playground — tweak duration, timing, delay, iteration, direction, fill-mode, and play-state, and copy the generated animation shorthand.

  css demo css_10_batch2_maxmode
• Transitions Playground

  Interpolate between states on hover/toggle, see animatable vs discrete properties, and watch transition-behavior: allow-discrete fade display:none.

  css demo css_10_batch2_maxmode
• Easing — Bézier, steps & linear()

  Drag cubic-bezier control points, feel the curve on a track, step through steps(), approximate springs with linear(), and race two easings.

  css demo css_10_batch2_maxmode
• Transforms Sandbox (2D/3D)

  Translate, scale, rotate, skew, and transform-origin live; see why function order matters; flip a 3D card with perspective and preserve-3d.

  css demo css_10_batch2_maxmode
• Animation Performance Race

  Animate hundreds of elements via compositor-only transform/opacity vs layout-triggering left/top — watch the live FPS meter drop and reveal jank.

  css demo css_10_batch2_maxmode
• Animating display & height:auto

  Compare the grid 0fr→1fr trick, interpolate-size, and instant baseline on a real accordion, plus an allow-discrete toast that fades in and out.

  css demo css_10_batch2_maxmode
• Animating @property Variables

  Registered vs unregistered custom properties side by side — animate gradient angles, gradient borders, and a typed <number> counter smoothly.

  css demo css_10_batch2_maxmode
• prefers-reduced-motion Lab

  Detect the OS setting live via matchMedia, simulate both modes in-page, and see motion replaced with cross-fades instead of removed entirely.

  css demo css_10_batch2_maxmode
• Staggered & Sequenced Motion

  Reveal a list with --index calc() delays, change step/direction, and sequence multiple comma-separated animations on a single element.

  css demo css_10_batch2_maxmode
• Entry/Exit with @starting-style

  Animate toasts, modals, dropdowns, and tooltips in and out with @starting-style + allow-discrete — toggle it off to feel the difference.

  css demo css_10_batch2_maxmode

CSS 3D · css_3d

• Perspective & the Z-axis

  Move a panel toward and away from the camera with translateZ, dial perspective and perspective-origin, rotate on all three axes, and flip a card — the 3D mental model made visible.

  css 3d demo css_3d
• preserve-3d Cube Builder

  Watch six flat faces fold into a real cube, toggle transform-style: preserve-3d to see it collapse, explode the faces apart, and flip backface-visibility on and off.

  css 3d demo css_3d
• 3D Carousel & Coverflow

  A rotating 3D ring of cards built from rotateY + translateZ, plus an Apple-style coverflow — adjust radius, item count, and spin speed, and step through items.

  css 3d demo css_3d
• 3D Lighting, Perf & A11y

  A polished spinning 3D object with gradient/brightness shading, plus toggles for will-change, z-fighting, and prefers-reduced-motion — see how to ship 3D responsibly.

  css 3d demo css_3d

SVG Deep Dive · svg_10

• SVG Coordinate & viewBox Lab

  Drag the viewBox min-x/min-y/width/height and watch the same shapes pan and zoom; toggle preserveAspectRatio and basic shapes (rect, circle, ellipse, line, polygon) on a live grid.

  svg demo svg_10
• SVG Path Command Builder

  Build a <path> command by command — M/L/H/V, cubic & quadratic Béziers, smooth shortcuts, and elliptical arcs — with draggable control points and the live d attribute.

  svg demo svg_10
• SVG Painting Playground

  Fill rules, stroke width/linecap/linejoin/dasharray, linear & radial gradients, and tiling patterns — tweak every paint property and copy the markup.

  svg demo svg_10
• SVG Text & textPath Lab

  Position text with x/y/dx/dy and anchors, style tspans, and flow a label along any curve with <textPath> — adjust startOffset and the path live.

  svg demo svg_10
• SVG Transforms & Nested Coords

  translate/scale/rotate/skew with transform-origin, see why order matters, group with <g>, and nest an inner <svg> to understand local coordinate systems.

  svg demo svg_10
• SVG Animation Studio

  Line-drawing with stroke-dashoffset, CSS keyframes vs SMIL <animate>/<animateTransform>, and motion along a path — play, scrub, and read the generated code.

  svg demo svg_10
• SVG Filter Playground

  Compose feGaussianBlur, feColorMatrix, feOffset/feMerge drop shadows, feDropShadow, and a glow pipeline — adjust primitives and watch the filter region update.

  svg demo svg_10
• SVG Clipping & Masking Lab

  Compare clipPath (hard, binary) vs mask (soft, luminance/alpha), drag the clip shape, and feather a gradient mask to fade an image — side by side.

  svg demo svg_10
• Interactive SVG Chart

  A data-driven bar/line chart drawn from a JS array — edit values, hover for tooltips, see screen→user coordinate mapping and hit testing in action.

  svg demo svg_10
• SVG Production & Sprites

  Before/after SVGO optimization byte counts, a <symbol> + <use> icon sprite, currentColor theming, and an accessibility checklist (title/desc/role).

  svg demo svg_10
• SVG Path Morphing Lab

  Scrub and animate between two paths that share command structure — see linear coordinate interpolation rebuild the d attribute live, the foundation of icon morphs.

  svg demo svg_10
• Progress Rings & Gauges

  The circumference trick: stroke-dashoffset = C × (1 − percent) drives a circular progress ring and a 270° speedometer gauge, with the live math shown.

  svg demo svg_10
• Generative Patterns & Blobs

  Generate repeating <pattern> tiles (dots, grid, hatch) for tiny resolution-independent backgrounds, plus an organic blob generator built from smooth closed Bézier curves.

  svg demo svg_10
• React/JSX Icon Component

  Tune size/color/strokeWidth props and watch the rendered icon and the equivalent typed React/TSX component + usage update together — the icon-system pattern.

  svg react demo svg_10
• Interactive Pan & Zoom Map

  Drag to pan and scroll to zoom toward the cursor by driving only the viewBox — the zoom-to-point formula, non-scaling strokes, and clickable choropleth regions.

  svg maps demo svg_10
• Accessible SVG Lab

  Decorative vs meaningful SVG, role="img" + aria-labelledby with <title>/<desc>, a keyboard-focusable chart, an aria-live status, and a visually-hidden data table alternative.

  svg a11y demo svg_10
• Icon Sprite Pipeline

  Combine many icons into one <symbol> sheet and render with <use>, compare inline vs external sprite delivery, and theme every icon at once with currentColor.

  svg icons demo svg_10
• Animation Timelines & Libraries

  A hand-built timeline player with stagger, easing, play and scrub controls — the exact orchestration features GSAP/anime.js/Motion sell you, plus a which-tool-when table.

  svg animation demo svg_10
• SVG Performance Stress Test

  Push the animated node count up and watch a live FPS meter, then compare transform vs cx/cy animation and toggle a blur filter to feel the real rendering cost.

  svg performance demo svg_10
• Build a Chart From Scratch

  No D3, no Chart.js — edit the data and watch scales, nice ticks, axes, gridlines and bars recompute by hand, with native <title> tooltips and responsive viewBox sizing.

  svg charts demo svg_10
• SMIL Scene Choreography

  A self-playing, looping sunrise scene sequenced entirely with SMIL syncbase timing (begin="other.end") — sky, sun, clouds and title fire in order, with keySplines easing and a Replay button.

  svg animation demo svg_10
• Motion Paths & orient

  Two arrows follow the same curve at the same speed — only rotate="auto" differs, so one banks into the turn and one slides. animateMotion + mpath with a speed control and the CSS offset-path equivalent.

  svg animation demo svg_10
• Character Rigging Studio

  A stick figure rigged from nested <g> joints — rotate each around its pivot and transform inheritance swings the whole limb. Switch between idle, wave and a walk cycle, and reveal the joint pivots.

  svg animation demo svg_10
• Scroll-Driven SVG Story

  Scroll is the timeline: a trail draws itself, a hiker climbs, the sun rises, and three layers parallax — built on the Scroll-driven Animations API (scroll()/view()) with a cross-browser JS fallback.

  svg animation scroll demo svg_10
• Ambient Looping Scene

  A forever-looping night scene — seamless parallax hills (translate a tile by its own width then wrap) and a recycled requestAnimationFrame firefly pool that twinkles via sine, all on a reduced-motion budget.

  svg animation particles svg_10

Building AI Agents · llm_10

• Tokenizer & Context Budget

  Subword tokenization, context window math, and agent budgeting — the hard limit every agent respects.

  ai demo llm_10
• LLM Sampling Visualizer

  Temperature, top_p, top_k reshape logits live — sample tokens and see greedy vs creative output.

  ai demo llm_10
• Agent Prompt Builder

  Compose system/user messages, few-shot examples, JSON schema output, and injection guard patterns.

  ai demo llm_10
• Stopping Criteria Simulator

  EOS tokens, max_tokens, stop sequences, finish_reason — streaming truncation and runaway cost guards.

  ai demo llm_10
• Context Window Packer

  Pack system prompt, tools, history, RAG chunks, and output reserve into a fixed context budget.

  ai demo llm_10
• Fine-tune vs Prompt vs RAG

  Decision tree: knowledge vs behavior, data needs, cost, privacy — when to retrieve, prompt, or train.

  ai demo llm_10
• LLM & Agent Eval Lab

  Golden sets, offline metrics, LLM-as-judge rubrics, A/B bars, and regression-style scoring.

  ai demo llm_10
• Model Selector Matrix

  Capability tiers, context size, modality, cost, privacy, and tool-use — pick models beyond leaderboards.

  ai demo llm_10
• Function Calling Loop

  JSON Schema tools, request→execute→result loop, parallel calls, validation errors, and security traps.

  ai demo llm_10
• Agent Loop (ReAct)

  ReAct, reflection, and planning steps — watch a multi-turn agent loop with tool calls and guardrails.

  ai demo llm_10