Super simple, basic & accessible accordion with a little bit of GSAP for smooth transitions.
Just need to tweak a few things, then it'll be available on CodePen.
Automatically generated article index with scroll-to and active link highlighting.
Used in https://vettvangur.is/blogg section.
Revealing items on page load/scroll. Used in https://lsr.is and https://npi.int.
Originally created for https://heilsueflandi.is, also used on https://velvera.is.
Mouse driven particle trail with velocity based emission.
A draggable custom scrollbar that works with native scrolling, Lenis, GSAP ScrollSmoother, and likely any other scrolling library out there.
Needs some work & adjustments, then it'll be available on CodePen - version on https://brand.vettvangur.is works slightly better.
A draggable slider that supports both drag gestures and horizontal trackpad scrolling.
Animated box with & arrow indicating an external link. Old stuff, needs some refactoring.
GSAP ScollSmoother-like lag & speed effects without using ScrollSmoother. Works with native scrolling or any scroll library such as Lenis.
Control the amount of lag & speed individually using data attributes.
Perfectly fits navigation elements into available space.
Resize the window to see it in action.
Seamless text animation, used on https://hareyding.is. Text can travel on any SVG path shape you want.
Proof of concept with a 3D car model doing stuff while you scroll. Six Three.js scenes with scroll-triggered animations.
3D model by https://sketchfab.com/toivo.
Animated, pointer-interactive 3D logo built with layered SVGs and GSAP.
Made for https://brand.vettvangur.is. You can drag the logo to rotate it.
Rough sketch & some testing. Finished work on https://apparatus.is.
Animation draft for https://atlantsolia.is 2023 release.
Fluid vw based layout concept for 2023 AO website - finished project on https://atlantsolia.is.
2026 release of https://ccrch.com.
Gooey effect using SVG filters & GSAP Morph SVG plugin.
Made for https://noi.is 2026 Easter campaign.
A fiery, grainy background inspired by the Clancy album artwork, animated with Three.js and custom shaders.
Multiple YT embeds on a single page - testing performance, transition & buffering between videos.
When you switch, the next video continues from the previous video's timestamp.
Draft for https://twentyonepilots.is.
Second version of the player - different layout + directional hovers.
My first 100% vibe designed & coded website with ChatGPT. Love that 2010s SaaS/WordPress vibe. So bad it's kind of good.
Design - 4 minutes.
Image assets - 23 minutes - apparently it's not that easy for GPT to get the layout right & cut out assets properly or maybe my prompts weren't clear enough.
HTML + CSS - 2 minutes.
HTML/CSS finetuning & making it "99% pixel perfect" - 8 minutes.
Total - 37 minutes - be afrAId! ;)
...cookie, cookie!!! Playing around with https://brm.io/matter-js/ 2D physics engine. Made for https://vettvangur.is 2019 release.
Pixel-art sprites that scatter across a CSS grid on hover and reassemble on hover out.
Each sprite is built from a set of divs positioned with grid-area property.
Idea draft for https://apparatus.is 2026 release.
Hero & accordion blocks - adding animation + some SVG masking. Made for https://distica.is.
Parallax SVG animation for 2019 https://dominos.is ad campaign.
Responsive to mouse movement on desktop & device orientation change on mobile.
Homepage banner for 2023 https://dominos.is ad campaign.
Visual, layout, and animation draft for a travel planning minisite.
An animated breakdown of fluid responsive web design, including practical examples and a live resize listener demonstrating the approach in action.
Rem based layout - example of fluid responsive web design in action.
Logo animation concept for https://gamecontinu.es game dev studio.
Random letters briefly switch between regular and pixel-style fonts, creating a playful glitchy headline effect.
Hovering over the headline will pause the flicker effect.
A follow-up to https://ccrch.com/playground/glitched-text-flicker-1 using CSS clip-paths instead of switching letters to pixel style fonts.
You can control how the shape fills in available space. Hovering over the headline will pause the flicker effect.
Based on https://ccrch.com/playground/glitched-text-flicker-2 - a sequence of randomly picked CSS clip-path shapes reveals the text as you scroll.
Homepage animation draft. Experimenting with AI-generated video from a single image & using scroll position to control video playback.
Layout draft for a real estate minisite. Finished project on https://homerapp.is.
Page elements for 2023 HS Orka website.
Web banner for Iceland Airwaves 2022 ad campaign. Hover the banner to see the animation.
Frontpage mockup for https://kalon.is.
Pre-release teaser site for https://kalon.is.
Logo animation for https://kosmosogkaos.is.
Testing animated SVG filters with image masking to create some fluffy, fur-like effects reacting to mouse movement & cursor speed.
Hover the text to see it at work.
Initial animation/interaction idea for https://kosmos.is. Hover the hero to see it work.
Maskot animation drafts for https://kosmos.is.
Logo interaction idea for https://kosmos.is. Drag it to see the effect.
Click either line to morph it into a spring.
Draft for animated banner for KSÍ website. Finished project on https://ksi.is.
Website performance meter added here for testing purposes.
Small widget made for my dad's website. Hover the corner to reveal LinkedIn profile link.
Originally at https://szkudlarek.co, archived version here - https://web.archive.org/web/20180328060342/szkudlarek.co.
Icon animations for https://live.is - this was just the initial draft.
Click the icon to see the animation.
Full set of icons made for https://live.is. Click the icon to see the animation.
SVG line animations for https://ljufalif.is.
Showcase of drafts and animation ideas for 2025 https://lyfja.is release.
Animations for 2025 https://lyfja.is release.
Navigation for 2023 release of https://netgiro.is.
Minisite for 2025 Christmas campaign - https://www.noi.is/konfektid-okkar-i-90-ar
Minisite for 2026 Easter campaign - https://www.noi.is/forskot-a-paskana
Prototype minisite for Nói Síríus https://plataarsins.is campaign.
Simple template for https://noi.is/konfekt-gjafaleikur campaign.
Apparently there's no need to rely on tables or overly heavy markup to make this look good across email clients. Yay!
Although a bit of inline styling is still needed for consistent rendering.
Homepage animation draft. Hero video generated from a single image using Kling 3.0.
Pixelated canvas text sampled into Three.js particles and scattered across the screen while scrolling down.
Page load animation idea for https://radarinn.is.
Squeezing in some extra content between cols & moving the content along with cols responsively while screen is being resized.
Used this code, with some alterations, in 2016 releases of https://szkudlarek.co (portfolio section) and https://arcticcircle.org (speakers section).
Complete source code for an old 2015 minisite - https://reykjavik.rocks
Using YouTube api for background video + few css transitions for nice look & feel.
Made for https://brand.vettgvangur.is typography section. Click the text to repeat the animation.
CSS logo animation for a webdev studio https://skapalon.is.
The company doesn't exist anymore, their archived website is here - https://web.archive.org/web/20161006023905/www.skapalon.is/
Originally created for https://welladvised.is 2023 release.
Minisite prototype for https://twentyonepilots.is/7-21 based on https://ccrch.com/playground/ropes canvas experiment.
First prototype for https://twentyonepilots.is/top-across
Teaser for the app - https://twentyonepilots.is/4-21
Second prototype for https://twentyonepilots.is/top-across
Improved video handling with less lag & better sync when switching between videos.
Check out the teaser for the app - https://twentyonepilots.is/4-21 - even better sync, fully optimized & almost no lag.
Guess the song as fast as you can - rough prototype for https://twentyonepilots.is/9-21
Improved & expanded version of https://ccrch.com/playground/top-guess-1 - a stop-and-answer song guessing game prototype for https://twentyonepilots.is/9-21
Prototype for https://twentyonepilots.is/top-lines - a web/app that will take you straight into the most powerful moments of |-/ songs.
Teaser for the app - https://twentyonepilots.is/3-21
Prototype for a teaser page for https://twentyonepilots.is/top-tour web/app.
Two songs playing simultaneously in sync. The top slider controls the balance, while the bottom one controls the playback progress.
2025 "Intentions" use reversed instrumental of 2013 "Truce", creating a thematic "full circle" moment - a loop where "Truce" begins the |-/ lore and "Intentions" brings it to a close.
Prototype for https://twentyonepilots.is/6-21
Rough draft for https://vettvangur.is 2023 release.
Hero and reel section design & animation draft for https://vettvangur.is 2024 release.
Layout/page idea with sticky sections, parallax images & marquee text effect.
Meant for https://vettvangur.is 2024 release.
Website flow & animation draft for https://vettvangur.is 2025 release.
Shapes in/out transition on page load/unload.
Rough design & animation draft for https://vettvangur.is 2026 release.
Buttons with animated dashed borders with layered CSS gradients & masks. Square + rounded variants with dynamically calculated corner coverage for seamless joins.
Made for https://kalon.is.
Simple marquee with layered backdrop-filter strips that create a soft depth/spotlight effect over moving text.
Hover the text to see the effect.
Same as #1 + a little bit of GSAP. Click the text to see the effect.
Recoloring images with CSS filters - same png, different appearance.
Implemented on https://www.noi.is/forskot-a-paskana.
Animated conic-gradient pie chart built with pure CSS. Super simple, minimal markup, zero JavaScript.
Animating numeric values to keywords with CSS only. Not supported in Firefox & Safari yet.
Bunch of CSS tricks and experiments - simple swiper, masonry, select & input tricks, adaptive tooltip.
Not finished, gotta split it into separate files. Will do that soon.
Playing around with text, image & mix-blend-mode. Hover the text to zoom in the image.
Using CSS columns prop.
Using CSS mask-image to create a spotlight effect on an image. Hover over the image to see the effect in action.
Animated noise.gif without using an actual .gif file.
Trying out CSS animation-range + animation-timeline instead of GSAP ScrollTrigger + using container query units (cqw) to vertically center the cards in the viewport + endless scroll.
Simple point light effect using 2 image layers with different contrast and brightness filters & a CSS mask.
Move the pointer around to highlight lighter areas. Click to change the image.
A CSS take on refracted glass. Move the mouse around to see the effect.
Super simple & doesn't look ugly - a button styled as a date input that opens the browser's native date picker. No libraries. Only CSS + 4 lines of JS to make it work.
Responsive card design for https://raudikrossinn.is.
Super simple & basic SVG 9-slice scaling using only CSS & SVG as border-image.
Simple text link hover effect - CSS animation & GSAP version.
Even though CSS version is easier to implement & doesn't require any js, GSAP is still better - finishes the animation even if hover is very brief.
My screens do this every now and then. I think I need a new dock...
Hover & click the content to see the effect.
Company logo as a masked SVG.
Text effect created for https://egilshollin.is - not really finished yet & doesn't work quite as intended.
Playing around with GPT - did pretty good - simple calendar implementation made with pretty much one prompt.
Quite an old thing, 2018, but still fun to look at - might refactor it some day & find some use for it.
Testing GSAP video scroll synchronization with ScrollTrigger + additional content.
Same with slightly different scroll sync approach.
Experimenting with a cookie-style border built using CSS masks and SVG border images. The shape adapts automatically to changing content dimensions.
Another oldie - needs some refactoring & tweaking.
Line animates to selected link adjusting to link width & position - 2 modes.
This snippet takes over the hash from the url - locks the scroll until other stuff has loaded/animated/etc and then scrolls to the selector.
100% responsive & fluid - scales proportionally to window size so no headeaches with tons of breakpoints or text wrapping issues.
Endless loop of cards with image preloading. Scroll down to continuously reveal the next card with smooth, uninterrupted transitions.
Improved version of https://ccrch.com/playground/endless-cards-1 with infinite Lenis scroll loop working both ways.
Interactive image grid where thumbnails expand into larger featured positions and return to their original spots on click or outside interaction.
Each click sends the enlarged image to a slightly different position and size.
Experimenting with fixed position headings & clipping masks.
A small experiment using the mask-image with radial-gradient to create a smooth glow effect.
Move the mouse over the icon to see it in action.
Net & dot patterns using the same glowing effect as the icons. Could work nicely as a subtle background effect.
Move the mouse around to see it in action.
Background gradient moves as you scroll the page down.
Pixi image dithering with some mouse interaction. Move the mouse over the image to see the effect.
Few image dithering experiments using PixiJS and WebGPU.
8 images stitched into a continuous deep-zoom loop. Each transition scales 4x with ScrollTrigger + Lenis infinite scroll.
Images are AI-generated & lightly tweaked to match - not great, not terrible, but you get the idea. Better source images make the transitions more seamless.
Scroll up or down to see the effect.
Website in your website so you can browse while you browse.
Url in a box is an input field - put whatever url you want there.
Gooey shapes with magnetic cursor. Click anywhere to reset.
Doesn't work on iOS (yet).
SVG motion blur filter in action. Click the box to see the effect.
Bringing static office photos to life with Kling 3.0 & GSAP. Three 4-second video clips generated from four photos.
Use the top nav to switch between different versions of this experiment.
Shift effect based on cursor position. Old thing, needs some polishing.
An experimental photo effect where horizontal image slices move as a continuous wave.
It could work as a hero or content section element. Move the mouse around to speed up the animation.
Click the text to see the effect.
Just hit Ctrl/Cmd + P to see what it's all about... & flip 'em pages!
Best experienced using PgDn. :)
Pretty cool effect where elements react to cursor proximity.
WebGL image parallax using a depth map to create a pseudo 3D pointer-driven movement effect.
Click the image to see a different one. Each image uses a slightly different depth offset & parallax strength.
Note: the effect isn't perfect & depends heavily on the depth map - the better the map, the better the overall look & feel.
GSAP rain animation with puddle accumulation and splash effects.
PixiJS canvas version of https://ccrch.com/playground/rain-1.
Small demo showing how to work with @media (prefers-reduced-motion: no-preference/reduce) query - contains both CSS & GSAP animations and transitions.
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
CSS rocket emitting DOM particles. Animated with GSAP.
Canvas experiment featuring interactive hanging ropes simulated with Verlet physics.
Move your cursor through the ropes or drag across them to create stronger motion and deformation.
Scroll, scroll, scroll...
Scroll the page to see the effect.
Fading & scaling image loop with seamless overlap transition.
Used on https://kalon.is frontpage.
Click any point to find shortest route through all points.
Route shown initially is the shortest possible from all given points.
Press & hold the keys to shake the screen.
The CodePen version features a similar effect, but with a different trigger, created for the October Ghost Talk challenge.
We need to go deeper...
Smooth animation direction change based on page scroll direction.
GSAP ScrollTrigger based smooth scrolling that adapts to device input - GSAP on desktop, native on mobile.
No ScrollSmoother plugin used.
Fullscreen slides with snappy scroll behavior using GSAP observer.
Scroll to run.
A simple, squiggly SVG trail that follows your cursor. Move your mouse around the screen to see it in action.
Like a needle and thread, but with a mouse. Move the cursor near the text to pull the thread.
Three.js experiment that samples SVG icon strokes, turns them into canvas paths & animates particles around those paths in 3D space.
Move the mouse around to tilt the object.
Experimenting with swup in/out transitions - different stuff happening on each page.
Built with GSAP 2.x (pre-GSAP 3 syntax, TweenMax era). Made 3 years before ScrollTrigger was introduced.
Control the video with scroll - when the page is near the top, the video loops over its first two seconds.
Scrolling down scrubs the playhead based on the current scroll position.
Interactive Navier-Stokes fluid simulation rendered as a tinted aplha mask or background texture. Based on https://paveldogreat.github.io/WebGL-Fluid-Simulation
Click to switch between solid color and textured background.
Zoom scale controled with data attribute. Panning follows the mouse position on hover.
Idea for sort of a showreel - synchronizing audio with visuals.
Steady beat until ~0:45 followed by pretty cool drop at 0:48.
Work in progress - sync currently ends at 0:53. Music by https://youtube.com/@ZEFRECORDZ.
Seamless bubble in/out transition between pages.
CTA section with an animated stack of cards. Each card is 3D transformed and animates along y & z axes.
Click a link to set the active card.
New version of https://ccrch.com/playground/card-stack-cta-1 - this one has different animation & stack is rendered dynamically as a one-way loop, with an active card always on top.
Scroll-triggered text reveal with a 3-column cascading sequence & infinite scroll loop.
A draggable endless gallery built from repeating canvases, with subtle parallaxes and proximity effects. Randomly placed images drift, rotate, and react to the cursor with different depth values.
Layout concept with floating image thumbnails & scroll-driven parallax movement.
Inspired by https://flowfest.co.uk layout design elements.
Similar effect as on https://openai.com/index/introducing-chatgpt-images-2-5 with a bit different approach - changing font family instead of replacing letters with images.
Hover over letters to shuffle their typeface.
Splitting the headline into multiple segments on scroll. Used in https://ccrch.com/playground/inette-layout.
Randomized pixel-grid image reveal built with DOM elements and GSAP. Similar to https://tympanus.net/codrops/2026/02/02/building-a-scroll-revealed-webgl-gallery-with-gsap-three-js-astro-and-barba-js/ but no WebGL.
Hover the boxes to see different reveal modes.
Layout/animation & split headline inspired by https://inette.co
Scroll down to see it in action.
Inspired by the hero section on https://lightshiprv.com. Animating clip-paths & scales instead of image positions.
Animated typo experiment inspired by typography from the 2018 release of http://lobstersnowboards.com.
Layered radial CSS image masks with scroll-driven ring rotation.
A hero or section background concept where concentric image rings rotate in opposite directions while scrolling.
An idea for a hero or content section with morphing PixiJS particles from a galaxy-like scatter into animated geometric shapes.
Scroll down to see it at work.
Click the links in the header to see the effect in action.
When you scroll a bit down and click a link, transition is locked to the current window scroll position.
Scroll-triggered text reveal with infinite scroll loop.
A scroll-driven storytelling layout with pinned fullscreen images, circular mask reveals, and animated text.
Move your pointer across the media to reveal a sampled pixel trail. Works with jpgs, transparent pngs, and videos.
Inspired by the hero section on https://letsplayfight.com website, with image sizes adapting to the viewport and dynamic size/position updates to keep the layout stable while resizing the browser.
This component doesn't exist on https://letsplayfight.com website, but it could :) - it's a kind of reversed hero image logic from https://ccrch.com/playground/playfight-hero.
Inspired by "what we do" section on https://letsplayfight.com website with different text animation & interactions.
Inspired by the UI text animation featured in Predator: Badlands movie, around 33 minutes in.
Click on the headline to trigger the animation.
Projects overview hero with animated images & text. Inspired by services section on https://digitalists.at.
Some layout idea - utilizing the radial selector idea. Scroll the page to see it at work.
Inspired by Frédéric Paquet's awwwards post animation - https://linkedin.com/feed/update/urn:li:activity:7440014898224488448
Scroll the page to see it at work.
Inspired by https://codepen.io/luis-lessrain/pen/yyapJwy rebuilt with a different approach. Scroll to see it at work.
GSAP SplitText effect emulating Scusso typeface.
Cutting & moving letters around each time it renders. Resize the window or click the text to see letter change.
Typeface info here - https://linkedin.com/posts/robert-samsonowitz_new-font-alert-meet-scusso-a-display-typeface-activity-7358488406491836416-AyP7
Scroll-driven SVG mask animation where each mask path moves independently to reveal the image.
A 3D image spiral, driven by GSAP and ScrollTrigger + endless scroll.
Hero section with animated text lines and inline images revealed between words.
Inspired by "About us" section on https://sirnik.webflow.io website.
Effect created for https://vettvangur.is 2025 release. Code still needs some work.
Improved version on https://brand.vettvangur.is.
Inspired by Osmo testimonial/text slider with GSAP SplitText reveal animations.
Original idea here - https://osmo.supply/preview?resource=line-reveal-testimonials
Playing around with Three.js. Design inspired by https://facebook.com/funlighticeland/ ads.
Inspired by the game UI design.
Minisite idea for scrollable photo album with dated events & headlines.
Spinning the table instead of the record - concept for https://twentyonepilots.is/2-21.
Inspired by intro section on https://tadesign.nl website.
Early draft of an e-commerce solution. Not finished - only the first three steps are implemented.
Testing some in/out animation effects.
Playing around with @scope & :scope.
Made to record a video.
Proper way of handling event listeners in GSAP MatchMedia wrapper.
Hovers work only for current breakpoint, and are removed/added on breakpoint change. Resize the browser to see it at work.
First column - hides too early due to the offset.
Second - standard wrapper approach, works fine, but needs extra markup.
Third - most convenient, no wrapper required, offset handled correctly.
Iframe & parent window communication - back & forth - using postMessage.
Experimenting with AI-generated video from a single image.
Plays on reveal, then responds to pointer position to control playback.
Trying to cheat Lighthouse performance scores. Kinda works, but not really, not a recommended practice for sure.
Playing around with the latest iOS glass effect hype.
Drag buttons around to see the distortion effect, there are 4 different filter effects.
Testing DrawSVG stuff.
ScrollTriggers test with different types of scroll - trying to figure out best way to avoid jumpy/glitchy pins on mobile.
Playing around with PixiJS mesh and mouse interactions.
Cursor that morphs based on movement direction and speed.
Initial version. Simple scroll snapping.
Improved, better trackpad & scroll momentum handling.
#2 + appending slides.
Testing SVG transform origins with transform-box & GSAP.
Looped short. Testing YouTube API integration.
Video scroll through using custom window scroll listener. Testing YouTube API integration.
Video scroll through using GSAP ScrollTrigger. Testing YouTube API integration.
Old experiment, not finished, needs GSAP Draggable and some finishing touches.
A draggable slider that supports both drag gestures and horizontal trackpad scrolling with slide duplication for continuous navigation.
Rough hero animation concept for https://kalon.is.
Rough page intro idea for https://kalon.is.
Gooey buttons idea for https://kalon.is
Infinite scrolling GSAP driven with adjustable speed and direction.
Not working 100% - rtl marquee is not looping properly.
Experimenting with SVG filter effect.
Testing mapbox stuff for https://twentyonepilots.is/top-tour web/app.
The hovered item expands along with its adjacent siblings.
An old experiment that needs revisiting and improvement.
Simple hopper game built with vanilla JS and some CSS.
🡠/🡢 or A/D to move, 🡡/W or SPACE to jump. Works on mobile too - swipe left/right to move, swipe up to jump.
Click fast enough to win. Not finished, work in progress.
1972 classic - single player + local versus mode, 3 difficulty settings. Supports keyboard & touch controls.
TØP + PONG = TØNG - classic pong - https://ccrch.com/playground/pong - with a |-/ twist.
Made for https://twentyonepilots.is/10-21
This tool measures whether a device can handle the current workload by tracking FPS and jank ratio.
It helps detect performance drops caused by heavy animations during page load or site transitions - especially on GSAP-heavy sites. This makes it easier to decide whether disabling some eye candy is a good idea on older or weaker machines.
The meter can be dragged around the page if it covers important content. Sample window, acceptable FPS, and max jank ratio are adjustable, with tooltips explaining what each metric means.
Three callbacks: on.degrade - when performance drops, on.degradeOverLimit - when it drops below acceptable levels, and on.recover - when performance stabilizes again.
In this demo, the fireworks and particle trail are hidden when performance degrades over the limit of allowed janks.
2026-1014-2228
2026-0804-2246
Answers:
Results: