Layoutit Terra is a CSS terrain generator that leverages stacked grids and 3D transforms.
Inspectable spikes, wedges, ramps and flats are stitched together into a voxel landscape.
Inspired by Transport Tycoon and all ’90s isometric classics.
Built from the southern hemisphere with Vue, Nuxt, and lots of love ♥
+------+ +------+ /| /| |\ |\ +-+----+ | | +----+-+ | | | | | | | | | +----+-+ +-+----+ | |/ |/ \| \| +------+ +------+…
It’s not often these days that I have the experience of “I didn’t know the Web could do that‽”
Once was when I saw DHTML Lemmings, for example, at a time when adding JavaScript to a page usually meant you were doing nothing more-sophisticated than adding a tooltip/popover or switching the images in your mystery meat navigation menu. Another was when I saw Google Earth’s browser-based implementation for the first time, performing 3D manipulations of a quality that I’d previously only seen in dedicated applications.
But I got that today when I played with Layoutit! Terra (from the folks behind one of the better CSS grid layout generators). It’d be pretty cool if it were “just” a Transport Tycoon-like landscape generator and editor, but the thing that blew my mind was discovered that it’s implemented entirely in HTML and CSS… not a line of JavaScript to be seen. Even speaking as somebody who played… and then reverse-engineered… things like Blackle Mori’s CSS Puzzle Box, I can’t even begin to fathom how I’d begin to conceive of such a thing, let alone implement it.
Well done, Layitout! team.
0 comments