Skip to content
Antoine Boucher

Options

Profiles

← All articles
Article

CodePen demos (collection)

3 min read

Listen to the audio story

Antoine's CodePen lab notebook · 1:27 · AI-written script, synthetic voices

Transcript

Ava: Before this blog existed, where did Antoine put his front-end experiments? On CodePen, which he calls his public lab notebook.

Andrew: So this page is a bookmark of old pens?

Ava: Pretty much. It collects live embeds from the jQuery and vanilla JavaScript years, around 2016 and 2017. Small UI labs first, then two bigger demos.

Andrew: What kind of small labs?

Ava: A sign-up form, a terminal-style console with a blinking cursor, a sticky header with jump links, a step progress bar, a date range picker and a countdown timer that plays a sound at zero.

Andrew: And something with browser APIs?

Ava: A screen capture demo using getDisplayMedia, with a live preview and a red recording border.

Andrew: Now the two big ones.

Ava: A full-screen HTML5 canvas blackboard where you pick a pen color and size, drag in images, save a PNG, or erase everything. And a Three.js wave, a grid of green cubes moving with a sine wave, which you can orbit with the mouse, keyboard or even a gamepad.

Andrew: Which ones does he still reopen?

Ava: The blackboard and the wave. When someone asks whether he can prototype a UI fast, those are the pens he goes back to.

Andrew: He says CodePen is where he learned feedback loops under four hundred lines.

Ava: The page links every pen, so you can fork anything. The full page has the live embeds.

CodePen demos collection — editor panes and a Three.js-style wave grid (featured art for this post)
Table of contents

CodePen was my public lab notebook before this Hugo blog existed — instant preview, comments, and forks without deploying. These are live CodePen embeds I kept from the jQuery-and-vanilla-JS years (~2016–2017): small UI labs, then two bigger demos (Canvas and Three.js). Each card uses the pen title from CodePen so you know what you are opening—not just the slug in the URL. Fork anything directly on CodePen if you want to adapt it.

1. UI and form experiments

Sign-up form (Log in Page Style)

Bootstrap-style signup layout: email, password, checkboxes, radio group, select, and textarea—mostly HTML/CSS practice.

Open on CodePen

Terminal-style console (Simple Console style)

Three faux terminal rows with a blinking cursor; keystrokes from one input mirror into the prompt text.

Open on CodePen

Sticky header with jump links

Long placeholder page, black nav bar that sticks after the hero image, and anchor links that scroll to sections.

Open on CodePen

2. jQuery-era widgets

Step progress bar

Four-step horizontal indicator with numbered nodes; jQuery marks completed steps and shortens the first label on narrow viewports (PASSENGER vs PASSENGER DETAILS).

Open on CodePen

Date range picker (double input)

Custom element daterangepicker-two-input wrapping Moment.js and the Date Range Picker plugin—departure/return fields and night count.

Open on CodePen

Countdown timer (Bootstrap)

Enter minutes, start with Enter, live min/sec display, reset button, and a short audio clip when the timer hits zero.

Open on CodePen

3. Browser APIs

Screen capture (ScreenShare)

getDisplayMedia demo: start/stop capture, live video preview, red recording border, and a log panel for track settings and errors.

Open on CodePen

4. Larger demos

HTML5 Canvas blackboard (Blackboard Interactive)

Full-screen drawing surface: pen color and size, drag imported images, save PNG, erase all paths and images.

Open on CodePen

Three.js wave (3D Animation)

Grid of green cubes animated with a sine-based wave; mouse drag, keyboard, scroll zoom, and optional gamepad camera nudges.

Open on CodePen
PenCodePen
Sign-up formBMdzwx[1]
Terminal consoleJxrqQx[2]
Sticky header + anchorsZEENwWB[3]
Step progress barbyVQKJ[4]
Date range pickerjjzxER[5]
Countdown timerxMXNyy[6]
Screen captureqzQpYg[7]
Canvas blackboardMLEdxr[8]
Three.js waverNoqVOj[9]

CodePen was where I learned feedback loops under 400 lines — before this Hugo blog existed. The blackboard and Three.js pens are the ones I reopen when someone asks “can you prototype UI fast?” Everything else is historical context for how form-heavy web felt before component frameworks ate the world.

Older long-form write-ups for some of these ideas were merged here; the aliases in the site config still point to this page.

References

  1. BMdzwx. (). [Web page] codepen.io.
  2. JxrqQx. (). [Web page] codepen.io.
  3. ZEENwWB. (). [Web page] codepen.io.
  4. byVQKJ. (). [Web page] codepen.io.
  5. jjzxER. (). [Web page] codepen.io.
  6. xMXNyy. (). [Web page] codepen.io.
  7. qzQpYg. (). [Web page] codepen.io.
  8. MLEdxr. (). [Web page] codepen.io.
  9. rNoqVOj. (). [Web page] codepen.io.

References use this article’s publication date.