DeckMath

Interactive 3D + animated decision tools

Visualize before you commit.

Deck decisions are hard to undo. Use 46 free 3D + animated tools to see patterns, materials, lighting, and construction steps before you spend $5K–$30K building.

Live animations
46
Real-time WebGL
3D
Code-aware
IRC 2021
No signup
Free

What stage are you at?

Designing your deck?

Pick a board pattern + material before you commit.

Composite or wood — which lasts?

25-year time-lapse: PT silvering vs composite holding color. Includes a maintenance toggle.

Finalizing details?

Lighting + atmosphere across times of day.

46 animations
3D · Live
Pattern Visualizer

Which board pattern is right for me?

5 patterns toggled live: straight, diagonal, herringbone, chevron, picture-frame. Waste % + board count for each.

3D · Live
Material Showcase

Which deck material should I pick?

8 materials with brand-accurate colors. PT, cedar, IPE + 5 composite/PVC brands. Climate fit + 25-yr cost.

3D · Live
Day/Night Toggle

Do I need deck lighting?

5 times of day with deck lights kicking on at twilight. Helps decide if you actually need fixtures.

3D · Live
Stair Construction

How are deck stairs built?

Animated 4-phase build sequence. Cost per phase + tools + common mistakes at each step.

3D · Live
Composite vs Wood Aging

Composite or wood — which actually lasts?

25-year side-by-side time-lapse. PT silvers + checks; composite holds color. Maintenance toggle included.

3D · Live
Foundation Build

How deep does a deck footing need to be?

3D soil cutaway of a single footing — layout, dig, pour, anchor, post. Climate-zone selector for warm/mid/cold/extreme frost depths.

3D · Live
Joist Spacing Visualization

12, 16, or 24 inch joist spacing — which is right?

3 deck framings side-by-side at 12″ / 16″ / 24″ O.C. Watch deflection under load + see IRC R502.3.1 compliance shift across spacing.

3D · Live
Framing Assembly

How does a deck frame actually go together?

5-phase build: ledger → posts/beam → joists → rim + blocking. Continues where Foundation Build ends — see the full load path come together.

3D · Live
Decking Installation

How do deck boards actually go down?

Starter → field → fastening → optional picture-frame border. Toggle PT vs composite + face-screw vs hidden clips. Caps the build-sequence trio.

3D · Live
Stair Stringer Cut

How is a stair stringer laid out + cut?

Blank 2×12 → framing-square layout → notch cuts → installed 3-stringer flight. The single most-failed DIY task on a deck — visualize the inside-corner trap.

3D · Live
Weight Distribution

How does a deck actually hold weight?

Load arrows trace the path: person → decking → joists → beam → posts → footings → soil. IRC R301.5 40 psf live-load reference. The mental model behind every span calc.

3D · Live
Railing Construction

How does a deck railing actually go together?

Post anchors → newel posts → top rail → composite/cable/wood infill → handrail. IRC R312.1.2 + R312.1.3 + R311.7.8 visible at every step. Caps the build narrative.

3D · Live
Frost Heave Demo

Why do deck footings need to go below the frost line?

5-year side-by-side time-lapse. Code-compliant vs shallow footings. Watch winter freeze-thaw progressively rack a non-compliant deck into structural failure.

3D · Live
Hidden Clip System

How does a composite hidden clip actually work?

Macro 3D close-up of a Trex Hideaway-class clip locking grooved boards to a joist. Color-matched screw, auto-spaced 3/16″ gap, no top-down fasteners.

3D · Live
Complete Deck Build (hero)

What order does a deck get built in, from footings to railing?

Cinematic 6-phase montage of a 16×12 attached deck: footings → posts + ledger → framing → decking → railing → finished sunset reveal. IRC code callouts on every stage.

3D · Live
Joist Hanger Install

How many nails does a joist hanger really need?

Macro 3D anatomy of a Simpson LUS210 hanger seating into a ledger and capturing a 2×10 joist. Full 18-nail pattern (10 ledger + 8 joist). IRC R507.10.

3D · Live
Ledger Board Attachment

What does a code-compliant ledger flashing actually look like?

5-layer cutaway: sheathing → WRB → back flashing → ledger + lag bolts → top z-flashing → siding. The #1 deck-collapse failure mode visualized. IRC R507.9.

3D · Live
Footing Cross-Section

What's underneath a deck footing, and why does frost depth matter?

Side cutaway from grass to subgrade: topsoil → frost zone → gravel base → concrete pier + rebar → J-bolt → stand-off anchor → post. IRC R403.1.4 compliant.

3D · Live
Pool Deck Setup

What's different about building a deck around a pool?

5-phase build of a composite deck wrapping a 16×8 in-ground pool: footings → 12″ OC joists → slip-resistant decking → bullnose coping → drainage slope away from pool.

3D · Live
Hot Tub Deck Demo

How do I reinforce a deck to hold a hot tub?

Standard 40 psf deck → 100 psf hot-tub-rated deck. Doubled joists at 12″ OC, extra center beam, 2 added footings. ~6,500 lb load path visualized.

3D · Live
Common Build Mistakes

What are the most common deck-build mistakes inspectors catch?

5-phase compilation: no flashing · half-nailed hanger · shallow footing · wrong fastener · no blocking. Same framing, each phase highlights one classic failure mode.

3D · Live
Real-time Color Picker

What does my deck look like in different composite colors?

Interactive 3D color picker. 12 industry colors (Trex Transcend, TimberTech AZEK, Fiberon) for the field + optional picture-frame border. Auto-rotates so you see every angle.

3D · Live
Trex Transcend Color Library

What do the top Trex Transcend colors look like?

6 hero colors from the Trex Transcend premium line — Saddle, Spiced Rum, Lava Rock, Tiki Torch, Tree House, Havana Gold — on a 5-board sample platform with siding-pairing notes.

3D · Live
Pressure-Treated 10-Year Time-Lapse

What does pressure-treated decking look like at year 5 and year 10?

Honest 10-year weathering visualization: fresh green-tan → faded → silvered → cracked → restained. The maintenance reality every PT cost calculator skips.

3D · Live
Cedar Wood Reveal

How does cedar decking age, and what does each stage look like?

Western Red Cedar from mill-rough → sanded → sealed → 5-year UV → 10-year silvered → re-sealed. Every stage of cedar's life shown side-by-side on a 5-board platform.

3D · Live
TimberTech Legacy Showcase

What do TimberTech Legacy PVC colors look like in person?

6 hero colors from the TimberTech Legacy premium PVC line — Pecan, Mocha, Tigerwood, Espresso, Ashwood, Whitewashed Walnut. AZEK Company's flagship variegated palette.

3D · Live
Diagonal 45° Pattern

What does a 45° diagonal deck look like, and how much more does it cost?

5-phase install of a 10×10 diagonal deck: chalk line → center boards → fill → picture-frame border. ~15% waste factor, ~25% extra labor over straight pattern.

3D · Live
Herringbone Pattern

How do you install a herringbone deck, and what does it cost?

5-phase build of interlocking L-pair tiles at 45°. Short ~24″ pieces on 12″ OC joists. Premium parquet geometry with ~25% material waste, ~2× labor.

3D · Live
Chevron Pattern

What's the difference between chevron and herringbone, and which is harder?

5-phase install of mitered V-shape chevron. Boards meet at perfect center seam with 45° miters. ~20% waste, ~2.5× labor — most cut-precision-demanding common pattern.

3D · Live
Picture Frame Pattern

What's a picture-frame deck, and why is it the highest-ROI pattern upgrade?

Single best pattern upgrade per dollar: ~5-8% material, ~10% labor, 2-3× visual impact. 5-phase build: layout → border → field → trim → settled with optional double-row.

3D · Live
Pergola Construction

How does a custom cedar pergola actually go together?

Architectural 6-phase build of a 12'×12' cedar pergola. Slate paver patio → Simpson stand-off anchors → chamfered 6×6 posts → doubled girders + 45° knee braces → sculpted cloud-lift rafter tails → top slats + bistro string lights + climbing vine.

3D · Live
Cable Railing Tension

Do cable railings actually meet IRC code?

5-phase macro of horizontal stainless cable railing — black aluminum posts, swage terminal hardware, 10 × 1/8″ 316 cables at ~3″ o.c., ~200 lb tensioning, IRC R312.1.3 4-inch sphere compliance test.

3D · Live
Glass Railing Mount

How does a frameless tempered glass railing mount?

5-phase macro of frameless glass — aluminum U-channel base shoe through-bolted to deck, 12 mm tempered panels lowered onto EPDM setting blocks, tightening wedges driven, aluminum cap rail. The pool / view-deck premium railing system.

3D · Live
Standard Parallel Pattern

Why is the parallel layout the default deck pattern?

5-phase build of the default board layout — perpendicular to joists, parallel to long edge. ~5% waste (lowest of any pattern), 1× labor baseline, used on 80%+ of real-world decks. The pattern every premium layout is measured against.

3D · Live
Code Compliance Visualizer

What does an inspector actually check on a deck?

5-phase IRC 2021 walkthrough — footings (R507.3 + R403.1.4), ledger flashing (R507.9.1), joist hangers (R507.6 + Simpson), guard rail (R312.1.2 + R312.1.3) — each zone highlighted in green on the same representative deck section.

3D · Live
IPE Hardwood Showcase

How does IPE age vs other premium hardwoods?

6-stage lifecycle of premium Brazilian Walnut — fresh-milled chocolate → 6-month silvering → 1-year driftwood → UV oil restoration → 5-year maintained → 25+ year heritage finish. Janka 3,680, Class A fire, 40-75+ year lifespan.

3D · Live
Trex Enhance Variations

Which Trex Enhance color suits my house?

All 6 Trex Enhance colors in 3D — Beach Dune, Saddle, Coastal Bluff, Foggy Wharf, Toasted Sand, Rocky Harbor. Enhance is Trex's value tier ($4-6/lf) and outsells Transcend 3-to-1. Per-color house-pairing notes.

3D · Live
TimberTech Reserve Premium

What does TimberTech's flagship line look like in 3D?

All 6 TimberTech Reserve colors — Storm, Antique Leather, Driftwood, Mahogany, Pecan, Weathered Teak. 100% PVC capstock, cathedral grain, lifetime structural warranty, coolest summer surface in composite.

3D · Live
Multi-Level Deck

How does a 2-tier kitchen-to-patio deck go together?

6-phase 3D build — upper kitchen-exit level at +24″, lower patio-grade level at +6″, 3-step transition with selective guard rail. The most architecturally striking deck layout.

3D · Live
Wraparound Deck

How is a corner-wrap L-shape deck framed?

6-phase L-shape build — 14′×7′ along south wall + 10′×7′ along east wall, mitred corner framing, premium outside-corner post sizing. The most square-footage-efficient corner-lot deck.

3D · Live
Roof Deck Scene

How does a rooftop deck mount without penetrating the roof?

6-phase rooftop install — TPO membrane → adjustable pedestals on 2-ft grid → interlocking 2×2 ft deck tiles → 42″ commercial cable/glass guard. Zero penetrations. Urban deck standard.

3D · Live
Size Slider

How big should my deck be?

Interactive scrubber through 6 deck sizes (8×6 → 20×16). Real-time use-case + installed cost range per size. The 'what does each size feel like?' tool.

3D · Live
Pattern Switcher

How do 6 deck patterns compare side-by-side?

Same 12×10 deck, 6 patterns — parallel, diagonal 45°, herringbone, chevron, picture frame, mixed accent. Live waste % + labor multiplier per pattern.

3D · Live
Season Changer

What will my deck look like across the year?

Same deck through 6 seasons — early spring → late spring → summer → autumn → late autumn → winter (with snow). Per-season build tips: snow loads, sealing windows, leaf cleanup.

3D · Live
Camera Orbit Control

How does camera angle change deck perception?

Same deck shot from 6 dramatic angles — plan, elevation, hero 3/4, drone, low-angle, auto-orbit. Pedagogical tool for design review + listing photography.

3D · Live
Configurator Suite

What do real complete deck designs look like?

6 curated preset packages — Budget PT, Family Trex, Modern PVC, Heritage Cedar, Premium IPE, Pool Deck. Size + material + pattern + cost in one deck per preset.

When animations help vs when calculators help

Animations help when
  • ▸ You can't picture what something will look like
  • ▸ You're choosing between aesthetic options
  • ▸ You want to understand how something is built
  • ▸ You're convincing a spouse / client
Calculators help when
  • ▸ You need exact $ cost or material count
  • ▸ You need IRC code compliance check
  • ▸ You need a number for a permit or quote
  • ▸ You're ready to build, not still deciding

Most projects use BOTH — animation to decide what to build, calculator to spec exactly how much. Each animation page links to the relevant calculator.