Realise Labs

Realise labs is a site which has a whole bunch of experiments from Realise Ltd. This might not work on your grandfather's web browser.

Developed by Realise.

Sitemaps and DOM structure from nested unordered lists

Description:
Using nested unordered lists to automatically create sitemap diagrams of any size or depth which are styleable with CSS.
Developer:
Ross Angus
Year:
2017
Category:
CSS

Dot Spirals, version 2

Description:
What if the dots went in different directions? Would they still line up?
Developer:
Nick Watton
Year:
2017
Category:
Canvas JavaScript

Dot Spirals

Description:
Dots orbiting a central point at different speeds line up at regular intervals and form patterns.
Developer:
Nick Watton
Year:
2017
Category:
Canvas JavaScript

How I use the insert tag

Description:
A suggestion on how the insert tag can be used during content load, to highlight missing content.
Developer:
Ross Angus
Year:
2017
Category:
HTML5 Content load

Pleasing Balls

Description:
One ball is always slightly bigger than the other. But when they move...
Developer:
Nick Watton
Year:
2017
Category:
Canvas JavaScript

Styleable select box replacement in pure CSS and semantic HTML

Description:
Creating a select-box-like control, which requires no JavaScript and is completely styleable (spoiler: requires JavaScript for accessibility)
Developer:
Ross Angus
Year:
2017
Category:
HTML5 CSS

Venus orbital patterns

Description:
In the time it takes Earth to orbit the Sun 8 times, Venus orbits 13 times. It also makes a pretty pattern - The Pentagram of Venus.
Developer:
Nick Watton
Year:
2017
Category:
Canvas JavaScript

The Love Calculator

Description:
The Love Calculator was quickly put together as an entry to a valentines competition. The logic is completely random, and is a bit of fun to see how compatible you and your colleagues, or maybe even your fave celebs are.
Developer:
Michael Boyd
Year:
2017
Category:
JavaScript

Valentines Submission

Description:
A flurry of pixelated hearts in a canvas element.
Developer:
Joe McDowall
Year:
2017
Category:
Canvas JavaScript CSS

Valentine's Card

Description:
A Valentine's card constructed of CSS 3D transformations, with a surprise inside.
Developer:
David Storey
Year:
2017
Category:
CSS JavaScript

Happy Valentines Day - From Realise

Description:
A heart-shape built from clip-path polygons, a fairly new feature of CSS.
Developer:
Oli Haley
Year:
2017
Category:
CSS

The Love'O'Meter

Description:
Using the Webkit Speech Recognition API, currently exclusive to Firefox and Chrome, this API offers Siri/Alexa-like speech-to-text capability within the browser.
Developer:
Oli Haley
Year:
2017
Category:
JavaScript

My Sensitive Heart

Description:
The winner of the Valentine's competition, Nick built an animated particle system using SVGs to plot shapes. Stick around to the end and you can fiddle with the settings and play around with the animations!
Developer:
Nick Watton
Year:
2017
Category:
Canvas JavaScript SVG

Aurora 3d

Description:
Using a canvas to procedurally generate an Aurora Borealis-like halo on top of an image of the Earth.
Developer:
Nick Watton
Year:
2017
Category:
Canvas JavaScript

Ghost Train Builder

Description:
Customise, ride and share a 3D Ghost Train.
Developer:
Bee Flaherty, James Haddrill, Joe McDowall, David Storey
Year:
2016
Category:
Virtual reality JavaScript

Harmonograph

Description:
Lissajous figures (the kind of curves which makes mathematicians hot and bothered) created on a canvas.
Developer:
Nick Watton
Year:
2016
Category:
Canvas JavaScript

Adequate Bingo

Description:
Multiplayer Bingo game powered by Airconsole.
Developer:
David Storey
Year:
2016
Category:
Game JavaScript

float: center; (sort of)

Description:
There are some layouts which CSS frameworks can't do. This is one of them.
Developer:
Ross Angus
Year:
2016
Category:
CSS

Banner ad experiments

Description:
Nick has undertaken a number of interesting experiments with JavaScript and canvas, while building banner ads. Note that the file size limits on these have driven him to some very innovative solutions.
Developer:
Nick Watton
Year:
2016
Category:
Canvas JavaScript

Takahē

Description:
Takahē is a set of files which allows a web developer to put together a client-side XSLT site with all navigation in an external XML file.
Developer:
Ross Angus
Year:
2016
Category:
XSLT

Scream Trap

Description:
Lets you use your smart phone as a kind of scary whoopee cushion. When moved, the phone will scream, show a scary picture and then record the reaction of the person being pranked as a GIF.
Developer:
David Storey
Year:
2015
Category:
JavaScript

Pixel player

Description:
The winning entry in our internal web audio competition. Lets you listen to an image without drugs.
Developer:
Nick Watton
Year:
2015
Category:
Canvas JavaScript Web audio

CSS Icons

Description:
An icon set built completely with CSS: no images, SVGs or custom typefaces used.
Developer:
Ross Angus
Year:
2015
Category:
CSS

James' Amazin Theramin

Description:
An entry in our internal web audio competition. Lets you control a Theramin with your mouse.
Developer:
James Haddrill
Year:
2015
Category:
JavaScript Web audio

Googly Eyes

Description:
Add as many googly eyes as you want to a website. As long as that website is happy sitting inside an iframe.
Developer:
Ross Angus
Year:
2015
Category:
JavaScript CSS

3D HTML

Description:
Using the power of Three.js, but with all the scene data in HTML on the page, rather than hidden away in JavaScript.
Developer:
Joe McDowall
Year:
2015
Category:
Canvas JavaScript

Movies on Freeview

Description:
Aggregates and filters upcoming movies on UK freeview.
Developer:
David Storey
Year:
2015
Category:
CSS JavaScript APIs

Wallpaper Generator

Description:
Generate a seemingly infinite series of mid-twentieth century wallpapers, then put them on your own website, for some reason.
Developer:
Ross Angus
Year:
2015
Category:
CSS JavaScript

Spiral Art Generator

Description:
Uses maths and patterns to create abstract art.
Developer:
David Storey
Year:
2015
Category:
Canvas JavaScript

Guess Their Age

Description:
Guess the age of well-known movie stars.
Developer:
David Storey
Year:
2014
Category:
CSS JavaScript APIs Game