Design preview / not the live site

Seven ways WebGecko could look.

Same business, same prices, same copy. Seven completely different design directions, all live and all clickable. webgecko.au is untouched.

Same page, three heroes

Identical design below the fold. Only the hero technique changes.

Materialise hero, a real client site assembled from points of light Live

Materialise

GPU point cloud / 241,500 points

A real client site scatters into a quarter million points and reassembles left to right. Hover the finished site and it ripples like water.

hero-materialise.pages.dev
Signal hero, a live particle graph of the lead system Live

Signal

Bezier flow particles / DOM labels

The lead system running live. A missed call fires a text, the text books a job, the job asks for a review. The counter only moves when a signal lands.

hero-signal.pages.dev
Forge hero, raymarched liquid metal Live

Forge

Raymarched SDF / no geometry at all

Liquid metal with zero 3D models, every pixel marched through a distance field. It sets into a browser slab, then melts back. Runs at 260fps.

hero-forge.pages.dev

Four different websites

Not reskins. Different typography, layout, colour and structure throughout.

Blueprint variant, an architect's drawing of a house with dimensions Live

Blueprint

Technical drafting / SVG line drawing

The whole page is an architect's drawing. The hero house draws itself stroke by stroke then annotates its own dimensions. Dimension lines measure the prices, and every section is a numbered sheet with a title block.

wg-blueprint.pages.dev
Paper variant, a light editorial layout in serif type Live

Paper

Print editorial / duotone plates

The opposite of every other one. Warm cream, serif at 110px mixing roman and italic, a visible 12 column grid the content deliberately breaks. The hero photo shows through the letterforms.

wg-paper.pages.dev
Terminal variant, a CRT phosphor boot sequence Live

Terminal

CRT phosphor / typed at 18ms a character

The site is a terminal session. It boots, prints ASCII art, then leaves a cursor blinking. Missed calls are a live log, pricing is an ASCII table, care plans are systemctl output, the FAQ is a man page.

wg-terminal.pages.dev
Kinetic variant, enormous condensed type on black Live

Kinetic

Swiss brutalist / scroll velocity shear

Type is the design. 200px condensed caps nearly touching both edges, hard black to white section cuts with no gradients anywhere. Scrolling fast physically bends the headlines.

wg-kinetic.pages.dev

All seven, copyable

Open them on your phone too. Every one has a separate mobile build.

https://hero-materialise.pages.dev
https://hero-signal.pages.dev
https://hero-forge.pages.dev
https://wg-blueprint.pages.dev
https://wg-paper.pages.dev
https://wg-terminal.pages.dev
https://wg-kinetic.pages.dev

Read this before picking one. Every page carries the real prices, the real savings comparisons, the missed call calculator and the honest reviews line, so you are judging design and not copy.

All seven were checked in a browser at desktop and at a true 390px phone viewport, with no console errors and no horizontal overflow. None of them have been tested on a real handset yet, which is the one thing left to do before any of this goes near real traffic.