Stefan Gerrits

@StefanGerrits2·4 public vizzes

CSS Terminal

A minimalist web page reconstructs a Windows command-prompt interface using React. It displays a black terminal window with a white title bar, where monospace text types out line by line with a stepped animation. The example uses CSS `@keyframes` for the blur effect, the `steps()` timing function for text reveal, and a blinking cursor animation. The implementation relies on plain HTML and CSS within a React project, with no external data source beyond the hardcoded Windows version text.

Mar 7, 2020

Loading thumbnail…

Splash animation with checkboxes

This example demonstrates a playful splash animation triggered by user interaction. A checkbox input, hidden via CSS, controls a series of animations when checked. The code uses HTML checkboxes, CSS transitions, and keyframe animations to create a mustard bottle that shakes and a paint splatter image that scales and fades over eight seconds. The splatter image is loaded from an external URL and rendered with a mix-blend-mode overlay effect, while the label element acts as a clickable toggle.

Feb 27, 2020

Loading thumbnail…

HTML Starter

This example demonstrates how to render structured data as HTML panels using the Mustache templating library. It shows a list of five panels, each containing a title, description, and three links, generated from a static JavaScript object. The code selects the Mustache template from the page, merges it with the data using `Mustache.to_html`, and injects the resulting markup into the container via `innerHTML`. The page also imports Mustache from a CDN and applies minimal CSS for centered, large-scale text.

Feb 18, 2020

Loading thumbnail…

React Starter

This example shows a circular bubble chart where hierarchical data is displayed as packed circles, with labels split across multiple lines and colored by group. The visualization uses d3.pack to compute the layout and D3’s selection API to join data to SVG circles, clip paths, and text elements. It incorporates React for the user interface and DOM.uid for unique identifiers, while datasets are loaded from a JSON file. Tooltips reveal each leaf’s title and formatted value.

Nov 11, 2019