# CodePen demos (collection)

> Live CodePen embeds from the mid-2010s front-end era—forms, jQuery widgets, getDisplayMedia, Canvas blackboard, and a Three.js wave—in one bookmark.

- HTML page: https://antoineboucher.info/CV/blog/posts/codepen-demos-antoinebou13/
- Language: en
- Translation (fr): https://antoineboucher.info/CV/blog/fr/posts/codepen-demos-antoinebou13/index.md
- Published: 2017-01-10
- Updated: 2026-05-23
- Tags: CodePen, Frontend, JavaScript, CSS, Canvas, Three.js, WebGL, JQuery, HTML, WebRTC
- Author: Antoine Boucher (https://antoineboucher.info/CV/index-en.html)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.

## UI and form experiments

## jQuery-era widgets

## Browser APIs

## Larger demos

## All pens (quick links)

| Pen | CodePen |
|-----|---------|
| Sign-up form | [BMdzwx](https://codepen.io/antoinebou13/pen/BMdzwx) |
| Terminal console | [JxrqQx](https://codepen.io/antoinebou13/pen/JxrqQx) |
| Sticky header + anchors | [ZEENwWB](https://codepen.io/antoinebou13/pen/ZEENwWB) |
| Step progress bar | [byVQKJ](https://codepen.io/antoinebou13/pen/byVQKJ) |
| Date range picker | [jjzxER](https://codepen.io/antoinebou13/pen/jjzxER) |
| Countdown timer | [xMXNyy](https://codepen.io/antoinebou13/pen/xMXNyy) |
| Screen capture | [qzQpYg](https://codepen.io/antoinebou13/pen/qzQpYg) |
| Canvas blackboard | [MLEdxr](https://codepen.io/antoinebou13/pen/MLEdxr) |
| Three.js wave | [rNoqVOj](https://codepen.io/antoinebou13/pen/rNoqVOj) |

## Why I still link these

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.

## Related posts

- [Software engineering journey](https://antoineboucher.info/CV/blog/posts/software-engineering-journey/) — from Flash and web demos to platform work
- [Portfolio Hugo week 1](https://antoineboucher.info/CV/blog/posts/portfolio-hugo-week-1/) — where demos became a real site
- [Kinectron + p5.js](https://antoineboucher.info/CV/blog/posts/kinectron-p5-sketch-gif/) — another creative-coding thread