✦ StealThis .dev
Pages Medium

DIY — 3D Print Service Landing

A polished landing page for a fictional print-on-demand farm, built around a live instant-quote engine. Pick a material, layer height, infill, quantity and rush option and every line of the price breakdown recalculates and flashes in place, alongside an estimated ship date. An isometric SVG printer animates its nozzle while the part grows layer by layer, capability stat cards hold the specs, a job gallery shows finished work with material and finish chips, and an eight-tile farm status band ticks live progress bars.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

3D Print Service Landing

Layerworks Print Farm is a fictional 24-hour print-on-demand shop, and the page is built the way a real one would want to sell: no contact form, no “request a quote” dead end. The hero splits copy and CTA against an isometric SVG printer whose gantry rises, whose nozzle sweeps left to right, and whose part stacks itself one orange layer at a time on a loop, with a small mono HUD reading nozzle temperature, bed temperature and current layer.

The centerpiece is the instant-quote card. A drop zone accepts a drag-and-drop gesture or a click to cycle through sample parts, each with its own raw mass and base machine time. Material, layer height, infill percentage, quantity and a rush switch all feed one pricing function: material cost scales with grams and per-gram rate, machine time scales with layer-height multiplier and infill, setup adds a flat fee plus a per-unit charge above ten units, and rush adds 35% on top of the subtotal. Every affected row flashes as it updates, and the ship date walks forward over a Monday-to-Saturday production calendar.

Below the quote, mono stat cards state build volume, tolerance, material count and maximum run size. A gallery of six shipped jobs renders each part as a CSS-lit SVG solid over a layer-line texture with material and finish chips. The farm status band draws eight printer tiles on a dark industrial panel, cycling their progress bars every three seconds and rolling a finished machine straight into its next job. A turnaround and shipping accordion closes the page with the practical answers.

How this look is built

The layer-line and blueprint textures are pure CSS: repeating-linear-gradient for the print striations and two crossed linear-gradient layers with background-size: 32px 32px for the hero grid, faded out with a radial mask-image so it never fights the copy — much cheaper than a tiled PNG and it stays crisp at any DPI. The range slider’s filled track is a gradient whose stop is driven by a --pct custom property that JS writes on input, so no extra element is needed. The accordion animates height with the grid-template-rows: 0fr → 1fr trick, which gets real transitions on auto-height content that max-height hacks only approximate. The printer animation is SVG groups with staggered animation-delay, so it composites on transform and opacity only; both it and the three-second farm polling are disabled under prefers-reduced-motion, which is the thing to watch — a looping animation plus a repainting grid is the one combination on this page that can cost battery on low-end devices.

Illustrative UI only — always follow real safety guidance when working with tools, electronics, or repairs.