WWW.
Front-end assets

Code snippets
and assets.

A simple single-column library for CodePen snippets. Each asset gets its own full row with a title, short description, tags, embedded preview, and a button to open the source on CodePen.

UI / Interaction

Min Max Room Builder

Min Max Room Builder is a compact isometric room playground built around minimum and maximum values. The room can shift between small and large layouts, tile size changes the overall density, and furniture scales within set limits so everything still feels believable. Min/max logic drives the whole experience, from slider ranges and clamped sizing to bounded placement, keeping items inside the room, snapped to the grid, and easy to move around.

minimum maximum challenge
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
UI / Interaction

Premium Price Cards with Cursor Morph

Premium Price Cards with Cursor Morph turns the cursor into part of the interface, shifting from a smooth circle into a rounded frame that wraps each card as it tilts in 3D. It also includes comparison interactions, like highlighting shared Pro features from the Studio card and a promo view that appears when the Pro card is clicked, with Esc to return.

pricing cards mouse morph tilt
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
Game / Interaction

Slingshot The Emoji - Distance Game

Testing physics, scaling, and advancement.

emoji slingshot game distance fly
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
UI / Interaction

Melting Dropdown Test

A single gradient button toggles a gooey “drop panel” underneath it.

View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
Effects / Interactive

Particle Flowfield Test

Particle Flowfield Test is a canvas demo where thousands of particles move through a changing flow field and leave trails behind them. The mouse pulls and swirls the particles as you move, so the pattern keeps shifting in a way that feels fluid and reactive. Clicking changes the look, and pressing C clears the screen.

canvas particles flowfield generative interactive
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
Effects / Interactive

Procedural Polar Grid Shader Test

Testing for WebGL shader that draws glowing rings and spokes in polar space. Move your mouse to change the spacing, and click anywhere to swap the highlight color. Developed with boredom.

webgl2 shader generative twgljs interactive
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
UI / Interaction

Sweet Pseudo Text Effects

Each headline uses a single h1 with matching text in data-text. ::before and ::after duplicate that text and become extra styled layers, so the effects come from gradients, strokes, blur, and blend modes instead of extra markup.

cpc-before-after codepenchallenge css pseudo typography
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
UI / Interaction

Neon Fuse Toggle - Before & After Challenge

This toggle uses a hidden checkbox and a label for all the visuals. The label (.fuse) is the track, ::before draws the circuit line, nodes, and moving spark, and ::after is the round knob that slides and switches between OFF and ON when checked. The “Show pseudos” button just toggles a class so ::before and ::after can be outlined and labeled without changing how the toggle works.

neon toggle css pseudo element
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
Game / Interaction

Emoji Stealth Ops Game - Before & After Challenge

A small stealth grid where every move matters, with arrow keys or WASD moving you through the map, pickups tracked by position, and the exit unlocking once everything is collected. Guards follow looping patrol paths, while ::before and ::after do real gameplay work by handling vision cones, guard states, player shadow, and noise effects, and the Reveal button pauses the game to show which pseudo-elements are doing what.

javascript game css pseudo element
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
Game / Interaction

Fruit Blaster Shooting Practice: Fruit Ninja Test

A quick fruit-shooting aim test where emoji fruit launch into the arena and can be hit with mouse, touch, or spacebar. When a fruit is hit, it shatters using pieces sampled from an offscreen canvas so it feels like it actually breaks apart, while a simple animation loop handles spawning, motion, particles, muzzle flash, crosshair, and the clean arcade-style HUD.

javascript game shooter canvas emoji
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
Game / Interaction

Emoji Roguelike Dungeon Test

Emoji Roguelike Dungeon Test is a small turn-based dungeon crawler built with plain HTML, CSS, and JavaScript. Each run is generated from a seed, rooms connect across a 10-room layout, enemies move after every action, and pickups give currency, healing, or a freeze ability, all rendered on a simple emoji grid with stats and an event log.

javascript game roguelike dungeon-crawler emoji
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
Game / Interaction

Grapple Swing Test

Grapple Swing Test is a small Matter.js physics game where you sling an emoji through an endless side-scrolling world. The camera follows as new platforms generate ahead, and clicking lets you fire a grapple that locks onto the first solid surface and pulls into a shorter springy rope for a bouncy, slingshot-style swing.

matter-js physics grapple endless-runner parallax
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
UI / Interactive

Emoji Color Blender - Fruit Smoothie Edition

Emoji Color Blender is a small smoothie-maker demo built with plain HTML, CSS, and JavaScript. Fruit emojis drop into a blender jar with simple physics, then spin into a layered vortex when blended, while their hues mix into a smoothie color, the jar fills with a matching gradient, shards sell the blending effect, and nutrition totals update along the way.

emoji blender animation
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
Game / Interaction

The Forgetful Chef - Emoji Cooking Memory Game

Emoji Order Memory is a fast memory game where a customer shows an order, the instructions disappear, and you rebuild it from memory by tapping food emojis into your tray. Each round mixes real items with decoys, orders get harder as you survive, mistakes cost points and lives, and small character touches like chef avatar choices, customer reactions, and item tooltips keep it lively.

javascript game memory emoji
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
Game / Interaction

Ice Slider Game and Level Editor

An emoji slider puzzle game built with plain HTML, CSS, and JavaScript, where each move sends you sliding in a straight line until you hit something solid. It includes built-in levels plus a browser editor with walls, locks, keys, and portals, and custom maps can be exported and imported with a simple shareable string.

javascript html css game puzzle
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
UI / Interactive

Inertial Age Gate + UI

Age gate UI with a wheel-style age picker that has real momentum and snap-to-center settling. Mouse wheel scrolling, plus and minus buttons (tap or press-and-hold), and full keyboard controls (arrows, Page Up/Down, Home/End, Enter) with proper spinbutton ARIA. The selected age changes the page copy (baby, teen, normal), scales the site typography via a CSS variable, and turns on a magnifier lens for ages 70+ that zooms wherever your cursor is. You can reopen the modal anytime with the “Select Age” button.

javascript ui css access age-gate
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.
UI / Interactive

Split Theme Typography

This is a draggable split-text demo where the same word is shown across two contrasting halves of the screen, with each side using its own gradient-filled text style so the lettering flips visually at the center seam. A text input at the top lets you change the word live, while a hidden hitbox sits over the text to handle dragging, keyboard nudging, focus, and touch input without affecting the layered visual copies underneath. The position is controlled through CSS variables, so both text halves stay perfectly synced as you move them around the screen.

javascript ui css color split
View source
Preview loads when this comes into view
Scroll down and this CodePen will start only when needed.