👻 Ghost Talk — мой первый CodePen Challenge!
Написал переводчик на «призрачный язык»: owl → owl-boo, candy → andy-coo.
Стек: JavaScript, Jest (5 тестов), HTML/CSS с хэллоуин-стилем.
Пен: codepen.io/TerminTime/p...
#codepenchallenge #cpc-ghost-talk
Написал переводчик на «призрачный язык»: owl → owl-boo, candy → andy-coo.
Стек: JavaScript, Jest (5 тестов), HTML/CSS с хэллоуин-стилем.
Пен: codepen.io/TerminTime/p...
#codepenchallenge #cpc-ghost-talk
Untitled
A code demo by TerminTime created on CodePen
codepen.io
October 12, 2026 at 8:12 PM
👻 Ghost Talk — мой первый CodePen Challenge!
Написал переводчик на «призрачный язык»: owl → owl-boo, candy → andy-coo.
Стек: JavaScript, Jest (5 тестов), HTML/CSS с хэллоуин-стилем.
Пен: codepen.io/TerminTime/p...
#codepenchallenge #cpc-ghost-talk
Написал переводчик на «призрачный язык»: owl → owl-boo, candy → andy-coo.
Стек: JavaScript, Jest (5 тестов), HTML/CSS с хэллоуин-стилем.
Пен: codepen.io/TerminTime/p...
#codepenchallenge #cpc-ghost-talk
🎃 A little Halloween FizzBuzz fun!
100 floating numbers, some CSS random(), a bit of sibling-index(), and some spooky surprises hiding behind the numbers. 👻
Hover over one to see what happens…
See the full demo on @codepen.io
codepen.io/editor/cbols...
#codepenchallenge #FizzBuzz #Halloween
100 floating numbers, some CSS random(), a bit of sibling-index(), and some spooky surprises hiding behind the numbers. 👻
Hover over one to see what happens…
See the full demo on @codepen.io
codepen.io/editor/cbols...
#codepenchallenge #FizzBuzz #Halloween
🎃 Halloween ~~FizzBuzz~~ BooScary with CSS random()
Hover over the floating numbers to get your BooScary 🧙 I wanted to do was use this weeks challenge as an excuse to test out the new CSS random() fun
codepen.io
October 7, 2026 at 6:46 PM
🎃 A little Halloween FizzBuzz fun!
100 floating numbers, some CSS random(), a bit of sibling-index(), and some spooky surprises hiding behind the numbers. 👻
Hover over one to see what happens…
See the full demo on @codepen.io
codepen.io/editor/cbols...
#codepenchallenge #FizzBuzz #Halloween
100 floating numbers, some CSS random(), a bit of sibling-index(), and some spooky surprises hiding behind the numbers. 👻
Hover over one to see what happens…
See the full demo on @codepen.io
codepen.io/editor/cbols...
#codepenchallenge #FizzBuzz #Halloween
Ghost Jam 👻🎛️
A Halloween FizzBuzz remix where Boo, Scary, and BooScary light up the grid while a ghost band takes over the stage.
Built for this week’s CodePen Jest challenge.
#codepenchallenge #cpc-halloween-fizzbuzz
codepen.io/editor/grauc...
A Halloween FizzBuzz remix where Boo, Scary, and BooScary light up the grid while a ghost band takes over the stage.
Built for this week’s CodePen Jest challenge.
#codepenchallenge #cpc-halloween-fizzbuzz
codepen.io/editor/grauc...
Ghost Jam
A Halloween FizzBuzz remix where 100 Boo, Scary, and BooScary cases become a glowing party wall behind a ghost band, complete with looping audio, reac
codepen.io
October 7, 2026 at 4:50 AM
Ghost Jam 👻🎛️
A Halloween FizzBuzz remix where Boo, Scary, and BooScary light up the grid while a ghost band takes over the stage.
Built for this week’s CodePen Jest challenge.
#codepenchallenge #cpc-halloween-fizzbuzz
codepen.io/editor/grauc...
A Halloween FizzBuzz remix where Boo, Scary, and BooScary light up the grid while a ghost band takes over the stage.
Built for this week’s CodePen Jest challenge.
#codepenchallenge #cpc-halloween-fizzbuzz
codepen.io/editor/grauc...
Inspired by Steven Wright quote, I charted an optimistic walk from Alaska to Argentina as if it were a casual stroll. 🥾🌎
Then I Googled it and found three people documenting walks along the route. Awesome.
#CodePenChallenge
codepen.io/editor/grauc...
Then I Googled it and found three people documenting walks along the route. Awesome.
#CodePenChallenge
codepen.io/editor/grauc...
The Long Way South: A Walking-Time Experiment
An extremely optimistic walk from Alaska to Argentina. Adjust the snack and meal breaks to see how far 22,000 km stretches across the calendar. The Da
codepen.io
October 1, 2026 at 2:13 AM
Inspired by Steven Wright quote, I charted an optimistic walk from Alaska to Argentina as if it were a casual stroll. 🥾🌎
Then I Googled it and found three people documenting walks along the route. Awesome.
#CodePenChallenge
codepen.io/editor/grauc...
Then I Googled it and found three people documenting walks along the route. Awesome.
#CodePenChallenge
codepen.io/editor/grauc...
Embedding ZIM in HTML - @codepen.io #CodePenChallenge #cpc-lines-bars - treat ZIM (Canvas) as an image in a div - then use CSS as usual. This gives you the hundreds of things ZIM can do right in any HTML page. Easy Peasy.
codepen.io/zimjs/pen/dP...
codepen.io/zimjs/pen/dP...
Easy Line and Bar Graphs with ZIM (Canvas) embedded in HTML - CodePen Challenge
Here we embed ZIM in HTML - as easy as an image. ZIM is a complete JavaScript Canvas Framework - about as simple as you can get. The first chart is n...
codepen.io
September 29, 2026 at 10:08 AM
Embedding ZIM in HTML - @codepen.io #CodePenChallenge #cpc-lines-bars - treat ZIM (Canvas) as an image in a div - then use CSS as usual. This gives you the hundreds of things ZIM can do right in any HTML page. Easy Peasy.
codepen.io/zimjs/pen/dP...
codepen.io/zimjs/pen/dP...
The unfinished task 👻
You only needed to change one button. Then came font hunting, redesigning, framework research, doomscrolling, and snacks.
The chart has receipts. The task follows you.
codepen.io/grauconejo13...
#CodePenChallenge #CreativeCoding
You only needed to change one button. Then came font hunting, redesigning, framework research, doomscrolling, and snacks.
The chart has receipts. The task follows you.
codepen.io/grauconejo13...
#CodePenChallenge #CreativeCoding
The Ghost of Those Darn Superimportant Tasks
You only needed to change one button. Then came the fonts, the redesign, the framework research, and the doomscrolling. The bar chart keeps the receip
codepen.io
September 22, 2026 at 6:40 PM
The unfinished task 👻
You only needed to change one button. Then came font hunting, redesigning, framework research, doomscrolling, and snacks.
The chart has receipts. The task follows you.
codepen.io/grauconejo13...
#CodePenChallenge #CreativeCoding
You only needed to change one button. Then came font hunting, redesigning, framework research, doomscrolling, and snacks.
The chart has receipts. The task follows you.
codepen.io/grauconejo13...
#CodePenChallenge #CreativeCoding
Baked Majority 🥧
A completely unserious exercise in baked governance, voting power, and pie supremacy.
CodePen Challenge: pie & donut charts.
#CodePenChallenge #CreativeCoding
codepen.io/editor/grauc...
A completely unserious exercise in baked governance, voting power, and pie supremacy.
CodePen Challenge: pie & donut charts.
#CodePenChallenge #CreativeCoding
codepen.io/editor/grauc...
Baked Majority
Six pies convene to settle the most important matter of baked governance: who deserves supremacy? Explore the council, inspect each member’s voting po
codepen.io
September 15, 2026 at 5:28 PM
Baked Majority 🥧
A completely unserious exercise in baked governance, voting power, and pie supremacy.
CodePen Challenge: pie & donut charts.
#CodePenChallenge #CreativeCoding
codepen.io/editor/grauc...
A completely unserious exercise in baked governance, voting power, and pie supremacy.
CodePen Challenge: pie & donut charts.
#CodePenChallenge #CreativeCoding
codepen.io/editor/grauc...
CodePen Challenge: flowchart.
I only needed one quick answer.
Then came another tab, a related link, a video, the comments, and something vaguely related.
You know how this goes. 😂
#codepenchallenge #cpc-flowchart
codepen.io/editor/grauc...
I only needed one quick answer.
Then came another tab, a related link, a video, the comments, and something vaguely related.
You know how this goes. 😂
#codepenchallenge #cpc-flowchart
codepen.io/editor/grauc...
Just One Quick Search
A hand-drawn interactive flowchart about how one quick search turns into too many tabs, unrelated videos, comment sections, and a complete loss of the
codepen.io
September 11, 2026 at 5:20 AM
CodePen Challenge: flowchart.
I only needed one quick answer.
Then came another tab, a related link, a video, the comments, and something vaguely related.
You know how this goes. 😂
#codepenchallenge #cpc-flowchart
codepen.io/editor/grauc...
I only needed one quick answer.
Then came another tab, a related link, a video, the comments, and something vaguely related.
You know how this goes. 😂
#codepenchallenge #cpc-flowchart
codepen.io/editor/grauc...
Decided to join this weeks @codepen.io's challenge. I have some fun ideas around splitting and displacing RGB channels of an input slider. Wish me luck! #CodePenChallenge
February 18, 2025 at 7:39 AM
Decided to join this weeks @codepen.io's challenge. I have some fun ideas around splitting and displacing RGB channels of an input slider. Wish me luck! #CodePenChallenge
Some connections reveal themselves only through movement..
MATCH — Alignment in Motion
Tap a puzzle piece.. and its counterpart responds from the opposite side..
#CodePen #CodePenChallenge #cpc-match #CreativeCoding #GenerativeArt #InteractiveDesign
codepen.io/Janina-Merge...
MATCH — Alignment in Motion
Tap a puzzle piece.. and its counterpart responds from the opposite side..
#CodePen #CodePenChallenge #cpc-match #CreativeCoding #GenerativeArt #InteractiveDesign
codepen.io/Janina-Merge...
MATCH — Alignment in Motion
Some connections reveal themselves only through movement.. Tap a puzzle piece.. and its counterpart responds from the opposite side.. ...
codepen.io
April 30, 2026 at 10:12 PM
Some connections reveal themselves only through movement..
MATCH — Alignment in Motion
Tap a puzzle piece.. and its counterpart responds from the opposite side..
#CodePen #CodePenChallenge #cpc-match #CreativeCoding #GenerativeArt #InteractiveDesign
codepen.io/Janina-Merge...
MATCH — Alignment in Motion
Tap a puzzle piece.. and its counterpart responds from the opposite side..
#CodePen #CodePenChallenge #cpc-match #CreativeCoding #GenerativeArt #InteractiveDesign
codepen.io/Janina-Merge...
What happens.. when input becomes process?
SLICE — Feed | Cut | Repeat
A quiet loop of input and transformation..
A single sheet.. cut into light.. motion.. and fragments..
#CodePen #CodePenChallenge #cpc-slice #CreativeCoding #WebAnimation
codepen.io/Janina-Merge...
SLICE — Feed | Cut | Repeat
A quiet loop of input and transformation..
A single sheet.. cut into light.. motion.. and fragments..
#CodePen #CodePenChallenge #cpc-slice #CreativeCoding #WebAnimation
codepen.io/Janina-Merge...
SLICE — Feed | Cut | Repeat
A quiet loop of input and transformation.. A single sheet.. cut into light.. motion .. and fragments.. ...
codepen.io
April 24, 2026 at 8:32 PM
What happens.. when input becomes process?
SLICE — Feed | Cut | Repeat
A quiet loop of input and transformation..
A single sheet.. cut into light.. motion.. and fragments..
#CodePen #CodePenChallenge #cpc-slice #CreativeCoding #WebAnimation
codepen.io/Janina-Merge...
SLICE — Feed | Cut | Repeat
A quiet loop of input and transformation..
A single sheet.. cut into light.. motion.. and fragments..
#CodePen #CodePenChallenge #cpc-slice #CreativeCoding #WebAnimation
codepen.io/Janina-Merge...
DONUT LOOP — Made a new CodePen for the LOOP-Challenge: a cloud.. rain.. donuts.. ripples.. and a small mode switch between rain and donut mode..
It began somewhere around infinity loops and ended here..
#CodePenChallenge #cpc-loop #Frontend #WebAnimation
codepen.io/Janina-Merge...
It began somewhere around infinity loops and ended here..
#CodePenChallenge #cpc-loop #Frontend #WebAnimation
codepen.io/Janina-Merge...
DONUT LOOP
A playful loop study where rain falls from a cloud.. transforms into donuts mid-air.. and lands in a puddle with soft ripples and floating motion.. S...
codepen.io
April 17, 2026 at 8:07 PM
DONUT LOOP — Made a new CodePen for the LOOP-Challenge: a cloud.. rain.. donuts.. ripples.. and a small mode switch between rain and donut mode..
It began somewhere around infinity loops and ended here..
#CodePenChallenge #cpc-loop #Frontend #WebAnimation
codepen.io/Janina-Merge...
It began somewhere around infinity loops and ended here..
#CodePenChallenge #cpc-loop #Frontend #WebAnimation
codepen.io/Janina-Merge...
Tension — my take on this week’s CodePen Challenge prompt.. String.
A string under tension.. A word held in place.. Pull a colored segment to loosen its matching letter..
#CodePen #CodePenChallenge #CreativeCoding #InteractionDesign #Typography
codepen.io/Janina-Merge...
A string under tension.. A word held in place.. Pull a colored segment to loosen its matching letter..
#CodePen #CodePenChallenge #CreativeCoding #InteractionDesign #Typography
codepen.io/Janina-Merge...
TENSION
A string under tension.. A word held in place.. Pull a colored segment to loosen its matching letter.. One by one.. the word comes apart before slow...
codepen.io
April 8, 2026 at 7:32 PM
Tension — my take on this week’s CodePen Challenge prompt.. String.
A string under tension.. A word held in place.. Pull a colored segment to loosen its matching letter..
#CodePen #CodePenChallenge #CreativeCoding #InteractionDesign #Typography
codepen.io/Janina-Merge...
A string under tension.. A word held in place.. Pull a colored segment to loosen its matching letter..
#CodePen #CodePenChallenge #CreativeCoding #InteractionDesign #Typography
codepen.io/Janina-Merge...
Exploring boolean logic through light, motion and interaction.
Made for the #CodePenChallenge #CPCTrueFalse #javaScript #css #animation
codepen.io/Janina-Merge...
Made for the #CodePenChallenge #CPCTrueFalse #javaScript #css #animation
codepen.io/Janina-Merge...
Boolean Visualization — Light, Motion & State
A visual interpretation of boolean logic trough light, motion and behaviour. Each toggle represents a simple true / false state: • Light reaveals the ...
codepen.io
March 19, 2026 at 1:03 PM
Exploring boolean logic through light, motion and interaction.
Made for the #CodePenChallenge #CPCTrueFalse #javaScript #css #animation
codepen.io/Janina-Merge...
Made for the #CodePenChallenge #CPCTrueFalse #javaScript #css #animation
codepen.io/Janina-Merge...
🎛️ New CodePen Challenge entry
Interactive card builder using:
HTML min/max
CSS clamp() + minmax()
JS Math.min() / Math.max()
Pick a preset, tweak the card, launch the style, and copy the CSS.
#CodePen #CodePenChallenge #HTML #CSS #JavaScript #UI
codepen.io/Janina-Merge...
Interactive card builder using:
HTML min/max
CSS clamp() + minmax()
JS Math.min() / Math.max()
Pick a preset, tweak the card, launch the style, and copy the CSS.
#CodePen #CodePenChallenge #HTML #CSS #JavaScript #UI
codepen.io/Janina-Merge...
MIN / MAX Card Builder Pro
An interactive UI generator exploring min and max across the front-end stack. Uses HTML min/max attributes, CSS clamp() and minmax (), and JavaScript M...
codepen.io
March 12, 2026 at 1:32 PM
🎛️ New CodePen Challenge entry
Interactive card builder using:
HTML min/max
CSS clamp() + minmax()
JS Math.min() / Math.max()
Pick a preset, tweak the card, launch the style, and copy the CSS.
#CodePen #CodePenChallenge #HTML #CSS #JavaScript #UI
codepen.io/Janina-Merge...
Interactive card builder using:
HTML min/max
CSS clamp() + minmax()
JS Math.min() / Math.max()
Pick a preset, tweak the card, launch the style, and copy the CSS.
#CodePen #CodePenChallenge #HTML #CSS #JavaScript #UI
codepen.io/Janina-Merge...
Futzed with the "Monochrome" #CodePenChallenge codepen.io/artlung/full...
Wavy (Monochrome)
Wavy ...
codepen.io
September 16, 2025 at 3:37 AM
Futzed with the "Monochrome" #CodePenChallenge codepen.io/artlung/full...
I love a web page in 2025. With a little bit of JavaScript and some CSS (and SCSS) one can create an interactive gewgaw that I find very satisfying. And so, I present Slideorama Pinwheels. #cpcSlideInteractions #CodePenChallenge codepen.io/artlung/pen/...
Slideorama Pinwheels
Just a bit of JavaScript, animation, random colors and numbers, and SLIDERS to participate in a CodePen Challenge for July 2025....
codepen.io
July 16, 2025 at 2:36 PM
I love a web page in 2025. With a little bit of JavaScript and some CSS (and SCSS) one can create an interactive gewgaw that I find very satisfying. And so, I present Slideorama Pinwheels. #cpcSlideInteractions #CodePenChallenge codepen.io/artlung/pen/...
17-02-2026 cpc-color-mix-blend
Using blend, add and blur to create a strange plasma effect...
codepen.io
February 17, 2026 at 7:17 AM