Components (0)

Accordion
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.

2018-0321-1230
Article index </>
Automatically generated article index with scroll-to and active link highlighting.
Used in https://vettvangur.is/blogg section.

2024-1029-1530
Automated items reveal
Revealing items on page load/scroll. Used in https://lsr.is and https://npi.int.

2024-0420-1233
Bubbly fireworks </>
Originally created for https://heilsueflandi.is, also used on https://velvera.is.

2023-0201-1157
Bubbly particle trail </>
Mouse driven particle trail with velocity based emission.

2024-0307-1256
Custom scrollbar </>
A draggable custom scrollbar that works with native scrolling, Lenis, GSAP ScrollSmoother, and likely any other scrolling library out there.

2026-0204-1231
Draggable slider #1
Needs some work & adjustments, then it'll be available on CodePen - version on https://brand.vettvangur.is works slightly better.

2024-1015-1524
Draggable slider #2
A draggable slider that supports both drag gestures and horizontal trackpad scrolling.

2026-0608-1401
External link icon </>
Animated box with & arrow indicating an external link. Old stuff, needs some refactoring.

2016-0824-1928
Lag & speed </>
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.

2026-0101-1249 - 2026-0610-1021
Priority navigation
Perfectly fits navigation elements into available space.
Resize the window to see it in action.
Just need to tweak a few things, then it'll be available on CodePen.

2024-0925-1036
SVG text on path animation </>
Seamless text animation, used on https://hareyding.is. Text can travel on any SVG path shape you want.

2025-0327-1042

Concepts & designs (0)

3D logo </>
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.

2025-1128-1015
Apparatus 2024 concept
Rough sketch & some testing. Finished work on https://apparatus.is.

2024-0417-0945
Atlantsolía intro animation
Animation draft for https://atlantsolia.is 2023 release.

2023-0831-1204
Atlantsolía layout
Fluid vw based layout concept for 2023 AO website - finished project on https://atlantsolia.is.

2023-0921-1421
Ccrch #26 </>
2026 release of https://ccrch.com.

2026-0126-0221
Chocolate curtain </>
Gooey effect using SVG filters & GSAP Morph SVG plugin.
Made for https://noi.is 2026 Easter campaign.

2026-0203-2131
Clancy flames
A fiery, grainy background inspired by the Clancy album artwork, animated with Three.js and custom shaders.

2026-0911-0954
Clancy player #1
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.

2025-0808-1732 - 2026-0910-1640
Clancy player #2
Second version of the player - different layout + directional hovers.
Draft for https://twentyonepilots.is.

2026-0910-2117
Continuing Care Retirement Community Hub
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! ;)

2026-0325-2214
Cookie, cookie, cookie...
...cookie, cookie!!! Playing around with https://brm.io/matter-js/ 2D physics engine. Made for https://vettvangur.is 2019 release.

2019-0924-1619
Dissolving pixel icons
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.

2026-0717-1440
Distica blocks
Hero & accordion blocks - adding animation + some SVG masking. Made for https://distica.is.

2026-0929-0940
Domino's Megavika
Parallax SVG animation for 2019 https://dominos.is ad campaign.
Responsive to mouse movement on desktop & device orientation change on mobile.

2019-0810-0944
Domino's Netdagar
Homepage banner for 2023 https://dominos.is ad campaign.

2023-0509-1201
Explorio
Visual, layout, and animation draft for a travel planning minisite.

2025-0417-1630
Fluid Responsive Web Design & Development </>
An animated breakdown of fluid responsive web design, including practical examples and a live resize listener demonstrating the approach in action.

2025-0501-0844
Fluid Responsive Web example </>
Rem based layout - example of fluid responsive web design in action.

2025-0501-0844
Game Continu.es </>
Logo animation concept for https://gamecontinu.es game dev studio.

2016-0815-2130
Glitched text flicker #1
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.
Idea draft for https://apparatus.is 2026 release.

2026-0717-1042
Glitched text flicker #2
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.
Idea draft for https://apparatus.is 2026 release.

2026-0717-2106
Glitched text reveal
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.
Idea draft for https://apparatus.is 2026 release.

2026-0720-1250
H verslun
Homepage animation draft. Experimenting with AI-generated video from a single image & using scroll position to control video playback.

2026-0323-1437
Hómer concept
Layout draft for a real estate minisite. Finished project on https://homerapp.is.

2025-0302-1238
HS Orka elements
Page elements for 2023 HS Orka website.

2023-0125-1236
Iceland Airwaves 2022
Web banner for Iceland Airwaves 2022 ad campaign. Hover the banner to see the animation.

2022-1030-0950
Kalon frontpage
Frontpage mockup for https://kalon.is.

2026-0222-1901
Kalon teaser
Pre-release teaser site for https://kalon.is.

2026-0224-1607
Kosmos & Kaos logo animation </>
Logo animation for https://kosmosogkaos.is.

2017-0929-0944
Kosmos fur
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.

2026-0415-1435
Kosmos hero
Initial animation/interaction idea for https://kosmos.is. Hover the hero to see it work.

2026-0413-2217
Kosmos maskots
Maskot animation drafts for https://kosmos.is.

2026-0421-1205
Kosmos spring
Logo interaction idea for https://kosmos.is. Drag it to see the effect.

2026-0119-1723
Kosmos spring morphing
Click either line to morph it into a spring.

2026-0413-0953
KSÍ banner
Draft for animated banner for KSÍ website. Finished project on https://ksi.is.
Website performance meter added here for testing purposes.

2025-0227-1630
LinkedIn corner widget </>
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.

2016-0403-1611
Live icons #1
Icon animations for https://live.is - this was just the initial draft.
Click the icon to see the animation.

2023-0130-1347
Live icons #2
Full set of icons made for https://live.is. Click the icon to see the animation.

2023-1206-1209
Ljúfa líf lines </>
SVG line animations for https://ljufalif.is.

2024-1015-1004
Lyfja animations #1
Showcase of drafts and animation ideas for 2025 https://lyfja.is release.

2025-1208-1504
Lyfja animations #2
Animations for 2025 https://lyfja.is release.

2026-0208-2133 - 2026-0331-2159
Netgíró menu
Navigation for 2023 release of https://netgiro.is.

2023-0831-1149
Nóa Konfekt
Minisite for 2025 Christmas campaign - https://www.noi.is/konfektid-okkar-i-90-ar

2025-1009-1520
Nóa Páska
Minisite for 2026 Easter campaign - https://www.noi.is/forskot-a-paskana

2026-0208-2248
Nóa Plata ársins
Prototype minisite for Nói Síríus https://plataarsins.is campaign.

2026-0601-1238
Nói Siríus email template </>
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.

2025-1126-1247
Örninn
Homepage animation draft. Hero video generated from a single image using Kling 3.0.

2026-0406-1909
Pixelated text particles
Pixelated canvas text sampled into Three.js particles and scattered across the screen while scrolling down.
Idea draft for https://apparatus.is 2026 release.

2026-0717-2152
Radarinn
Page load animation idea for https://radarinn.is.

2025-0423-1627
Responsive collapsible grid </>
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).

2016-0625-1033
Reykjavik.rocks </>
Complete source code for an old 2015 minisite - https://reykjavik.rocks
Using YouTube api for background video + few css transitions for nice look & feel.

2015-0411-1131
Scrambled text animation
Made for https://brand.vettgvangur.is typography section. Click the text to repeat the animation.

2025-1209-1154
Skapalón logo 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/

2016-1001-1237
Split text reveal </>
Originally created for https://welladvised.is 2023 release.

2024-0307-1146
The White Stripes </>
Minisite prototype for https://twentyonepilots.is/7-21 based on https://ccrch.com/playground/ropes canvas experiment.

2026-0612-1525
tøp-acrøss #1
First prototype for https://twentyonepilots.is/top-across
Teaser for the app - https://twentyonepilots.is/4-21

2025-1225-2121
tøp-acrøss #2
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.

2026-0227-2009
tøp-guess #1
Guess the song as fast as you can - rough prototype for https://twentyonepilots.is/9-21

2026-0804-2246
tøp-guess #2
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

2026-0811-2354
tøp-lines
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

2025-1204-2121
tøp-tøur teaser
Prototype for a teaser page for https://twentyonepilots.is/top-tour web/app.

2026-0309-2203
Truce & Intentions </>
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

2026-0512-1450
Vettvangur 2023
Rough draft for https://vettvangur.is 2023 release.

2023-0504-0920
Vettvangur 2024 </>
Hero and reel section design & animation draft for https://vettvangur.is 2024 release.

2024-0515-0911
Vettvangur 2024 sticky sections </>
Layout/page idea with sticky sections, parallax images & marquee text effect.
Meant for https://vettvangur.is 2024 release.

2024-0703-1621
Vettvangur 2025
Website flow & animation draft for https://vettvangur.is 2025 release.

2024-0926-1003
Vettvangur 2025 page transitions
Shapes in/out transition on page load/unload.

2026-0105-1003
Vettvangur 2026 concept
Rough design & animation draft for https://vettvangur.is 2026 release.

2026-0924-2133

CSS tricks (0)

Animated radial gradient </>
Made for https://kalon.is.

2026-0222-1901
Backdrop blur marquee </>
Simple marquee with layered backdrop-filter strips that create a soft depth/spotlight effect over moving text.

2026-0215-2050
Background clip text #1
Hover the text to see the effect.

2024-1028-1554
Background clip text #2
Same as #1 + a little bit of GSAP. Click the text to see the effect.

2025-0307-1443
Coloring images
Recoloring images with CSS filters - same png, different appearance.
Implemented on https://www.noi.is/forskot-a-paskana.

2026-0227-1005
Conic-gradient pie chart </>
Animated conic-gradient pie chart built with pure CSS. Super simple, minimal markup, zero JavaScript.

2026-0301-1145
CSS size interpolation
Animating numeric values to keywords with CSS only. Not supported in Firefox & Safari yet.

2026-1001-0936
CSS tricks bundle
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.

2025-0611-1330
Masked text
Playing around with text, image & mix-blend-mode. Hover the text to zoom in the image.

2024-1022-1331
Masonry layout
Using CSS columns prop.

2026-0925-1056
Moss mask
Using CSS mask-image to create a spotlight effect on an image. Hover over the image to see the effect in action.

2026-0616-1152
Noise.gif </>
Animated noise.gif without using an actual .gif file.

2026-0616-2342
Pinned stacking cards
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.

2026-0918-1339
Point light
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.

2026-0720-1813
Refracted glass
A CSS take on refracted glass. Move the mouse around to see the effect.

2026-1005-1157
Simplest datepicker
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.

2026-0915-1425
SVG 9-slice scaling </>
Responsive card design for https://raudikrossinn.is.
Super simple & basic SVG 9-slice scaling using only CSS & SVG as border-image.

2025-1230-1922
Text slide links
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.

2024-1010-1721
Vertical lines glitch
My screens do this every now and then. I think I need a new dock...
Hover & click the content to see the effect.

2026-0913-1838

Experiments (0)

Barrel text
Text effect created for https://egilshollin.is - not really finished yet & doesn't work quite as intended.

2025-1120-1123
Calendar
Playing around with GPT - did pretty good - simple calendar implementation made with pretty much one prompt.

2025-1027-2140
Chevron to box </>
Quite an old thing, 2018, but still fun to look at - might refactor it some day & find some use for it.

2018-0214-2213
Chromo Sapiens #1
Testing GSAP video scroll synchronization with ScrollTrigger + additional content.

2025-1213-2130
Chromo Sapiens #2
Same with slightly different scroll sync approach.

2025-1215-2140
Cookie border
Experimenting with a cookie-style border built using CSS masks and SVG border images. The shape adapts automatically to changing content dimensions.

2026-0601-2107
Crawling line
Another oldie - needs some refactoring & tweaking.
Line animates to selected link adjusting to link width & position - 2 modes.

2018-0216-1930
Deferred hash scroll
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.

2026-0310-1235
EM based layout
100% responsive & fluid - scales proportionally to window size so no headeaches with tons of breakpoints or text wrapping issues.

2024-0319-0937
Endless cards with a scroll loop #1 </>
Endless loop of cards with image preloading. Scroll down to continuously reveal the next card with smooth, uninterrupted transitions.

2018-0115-1433
Endless cards with a scroll loop #2
Improved version of https://ccrch.com/playground/endless-cards-1 with infinite Lenis scroll loop working both ways.

2018-0115-1433 - 2026-0716-2009
Expanding image grid
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.

2026-0716-2039
Fixed clipped headings
Experimenting with fixed position headings & clipping masks.

2018-0223-1048
Glowing icons </>
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.

2026-0403-2230
Glowing patterns </>
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.

2026-0408-1722
Gradient background </>
Background gradient moves as you scroll the page down.

2018-0116-2314
Image dithering #1
Pixi image dithering with some mouse interaction. Move the mouse over the image to see the effect.

2026-0618-1830
Image dithering #2
Few image dithering experiments using PixiJS and WebGPU.

2026-0704-1748
Image dithering #3
Few image dithering experiments using PixiJS and WebGPU.

2026-0707-2115
Infinite photo zoom
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.

2026-0925-2210
Macbook mockup
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.

2025-1203-1705
Magnetic goo
Gooey shapes with magnetic cursor. Click anywhere to reset.
Doesn't work on iOS (yet).

2024-0905-1244
Motion blur </>
SVG motion blur filter in action. Click the box to see the effect.

2026-0421-1044
Office life </>
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.

2026-0407-2012
Perspective shift
Shift effect based on cursor position. Old thing, needs some polishing.

2015-0203-2105
Photo wave
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.

2026-0713-2144
Pixel boom
Click the text to see the effect.

2018-0423-1955
Print (-ed animation)
Just hit Ctrl/Cmd + P to see what it's all about... & flip 'em pages!
Best experienced using PgDn. :)

2019-1004-1042
Proximity hovers
Pretty cool effect where elements react to cursor proximity.

2024-0905-0928
Pseudo 3D parallax
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.

2026-0903-1331
Rain #1
GSAP rain animation with puddle accumulation and splash effects.

2026-0714-1009
Rain #2
PixiJS canvas version of https://ccrch.com/playground/rain-1.

2026-0714-1233
Respect user's motion preference
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

2026-0204-1042
Rocket fly by
CSS rocket emitting DOM particles. Animated with GSAP.

2018-0122-1127
Ropes </>
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.

2026-0608-1213
Scroll looper </>
Scroll, scroll, scroll...

2018-0115-1433
Scroll velocity driven background
Scroll the page to see the effect.

2018-0831-2215
Seamless image loop </>
Fading & scaling image loop with seamless overlap transition.
Used on https://kalon.is frontpage.

2026-0224-1607
Shortest route between points </>
Click any point to find shortest route through all points.
Route shown initially is the shortest possible from all given points.

2018-1219-2003
Simultaneous key press
Press & hold the keys to shake the screen.

2026-1001-1720
Siteception </>
We need to go deeper...

2016-0331-2346
Smooth animation direction change </>
Smooth animation direction change based on page scroll direction.

2026-0331-0917
Smooth scroll without ScrollSmoother </>
GSAP ScrollTrigger based smooth scrolling that adapts to device input - GSAP on desktop, native on mobile.
No ScrollSmoother plugin used.

2021-1008-1927
Snappy slides
Fullscreen slides with snappy scroll behavior using GSAP observer.

2026-0618-1406
Sticky figures #1
Scroll to run.

2026-0926-1919
Sticky figures #2
Scroll to run.

2026-0928-1632
SVG mouse trail #1
A simple, squiggly SVG trail that follows your cursor. Move your mouse around the screen to see it in action.

2026-0915-1824
SVG mouse trail #2
Like a needle and thread, but with a mouse. Move the cursor near the text to pull the thread.

2026-0915-1856
SVG stroke particles
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.

2026-0908-2159
Swup
Experimenting with swup in/out transitions - different stuff happening on each page.

2023-1204-1448
Timeline based scroll animation
Built with GSAP 2.x (pre-GSAP 3 syntax, TweenMax era). Made 3 years before ScrollTrigger was introduced.

2017-1010-0950
Video scroll
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.

2019-1213-2305
WebGL fluid simulation
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.

2026-0903-1031
Zoom & pan on hover </>
Zoom scale controled with data attribute. Panning follows the mouse position on hover.

2014-1229-0833

Ideas & inspiration (0)

Boombox
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.

2024-1122-2048
Bubble page transition
Seamless bubble in/out transition between pages.

2024-0527-0842
Card stack CTA #1
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.

2026-0708-2205 - 2026-0907-1402
Card stack CTA #2
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.
Click a link to set the active card.

2026-0907-1435
Cascading text reveal
Scroll-triggered text reveal with a 3-column cascading sequence & infinite scroll loop.

2026-0902-1408
Endless grid gallery
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.

2026-0730-1210
Floating thumbnails layout
Layout concept with floating image thumbnails & scroll-driven parallax movement.

2026-0715-1316
Flowfest lines </>
Inspired by https://flowfest.co.uk layout design elements.

2026-0312-2250
Font shuffle
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.

2026-0910-1005
Horizontal headline split </>
Splitting the headline into multiple segments on scroll. Used in https://ccrch.com/playground/inette-layout.

2026-0401-1350 - 2026-0617-2040
Image pixel reveal
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.

2026-0910-1236
Inette layout
Layout/animation & split headline inspired by https://inette.co

2026-0401-1350
Lag gallery
Scroll down to see it in action.

2026-0611-1109
Lightship hero
Inspired by the hero section on https://lightshiprv.com. Animating clip-paths & scales instead of image positions.

2026-0616-2107
Lobster typeface </>
Animated typo experiment inspired by typography from the 2018 release of http://lobstersnowboards.com.

2018-0919-2317
Masked image rings
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.

2026-0714-1345
Morphing galaxy
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.

2026-0710-2103
Offset gallery
Scroll down to see it in action.

2026-0611-1020
Page zoom transition
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.

2024-0630-1042
Pill text reveal
Scroll-triggered text reveal with infinite scroll loop.

2026-0813-2059
Pinned image reveals
A scroll-driven storytelling layout with pinned fullscreen images, circular mask reveals, and animated text.

2026-0716-1742
Pixelated media
Move your pointer across the media to reveal a sampled pixel trail. Works with jpgs, transparent pngs, and videos.

2026-0727-1425
Playfight hero
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.

2026-0615-1024
Playfight images
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.

2026-0615-1338
Playfight links
Inspired by "what we do" section on https://letsplayfight.com website with different text animation & interactions.

2026-0613-2054
Predator: Badlands UI text </>
Inspired by the UI text animation featured in Predator: Badlands movie, around 33 minutes in.
Click on the headline to trigger the animation.

2026-0531-1554
Projects overview hero
Projects overview hero with animated images & text. Inspired by services section on https://digitalists.at.
Scroll down to see it at work.

2026-0709-1756
Radial headline
Some layout idea - utilizing the radial selector idea. Scroll the page to see it at work.

2026-0331-2239
Radial selector </>
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.

2026-0325-1517
Scusso typeface </>
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

2025-0808-1620
Shifting masks </>
Scroll-driven SVG mask animation where each mask path moves independently to reveal the image.

2026-0610-1301
Spiral gallery
A 3D image spiral, driven by GSAP and ScrollTrigger + endless scroll.

2026-0916-1510
Split-line hero
Hero section with animated text lines and inline images revealed between words.

2026-0617-1652
Stacking words </>
Inspired by "About us" section on https://sirnik.webflow.io website.

2026-0317-0804
SVG mask-image animation
Effect created for https://vettvangur.is 2025 release. Code still needs some work.
Improved version on https://brand.vettvangur.is.

2025-0528-1341
Testimonial slider </>
Inspired by Osmo testimonial/text slider with GSAP SplitText reveal animations.
Original idea here - https://osmo.supply/preview?resource=line-reveal-testimonials

2026-0307-1237
Tetrahedron
Playing around with Three.js. Design inspired by https://facebook.com/funlighticeland/ ads.

2026-0326-1436
The Last of Us buttons </>
Inspired by the game UI design.

2025-0606-1909
Timeline diary
Minisite idea for scrollable photo album with dated events & headlines.

2024-0417-2015
Turntable
Spinning the table instead of the record - concept for https://twentyonepilots.is/2-21.

2026-0115-0136
Vertical headline split </>
Inspired by intro section on https://tadesign.nl website.

2026-0312-1758
Windows configurator
Early draft of an e-commerce solution. Not finished - only the first three steps are implemented.

2019-1010-1147

Tests (0)

Content masks </>
Testing some in/out animation effects.

2024-0909-1056
CSS scope
Playing around with @scope & :scope.

2026-1005-1016
Fluid presentation iframe </>
Made to record a video.

2026-0310-1716
GSAP MatchMedia event listeners </>
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.

2026-0526-1705
GSAP ScrollTriggers done right </>
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.

2026-0125-1649
Iframe communication
Iframe & parent window communication - back & forth - using postMessage.

2026-0902-1830
Létt mjólk
Experimenting with AI-generated video from a single image.
Plays on reveal, then responds to pointer position to control playback.

2026-0406-1648
Lighthouse test </>
Trying to cheat Lighthouse performance scores. Kinda works, but not really, not a recommended practice for sure.

2024-0529-1048
Liquid glass
Playing around with the latest iOS glass effect hype.
Drag buttons around to see the distortion effect, there are 4 different filter effects.

2025-0808-1319
Lyfja animations test
Testing DrawSVG stuff.

2025-1203-0850 - 2026-0319-1002
Pinning test
ScrollTriggers test with different types of scroll - trying to figure out best way to avoid jumpy/glitchy pins on mobile.

2025-0227-1102
Pixi mesh
Playing around with PixiJS mesh and mouse interactions.

2026-0609-1034
Skewy cursor
Cursor that morphs based on movement direction and speed.

2024-1030-1723
Slide scroller #1
Initial version. Simple scroll snapping.

2025-1217-1402
Slide scroller #2
Improved, better trackpad & scroll momentum handling.

2025-1217-1413
Slide scroller #3
#2 + appending slides.

2025-1217-1443
SVG transform box
Testing SVG transform origins with transform-box & GSAP.

2026-1002-1059
YouTube test #1
Looped short. Testing YouTube API integration.

2025-0606-1811
YouTube test #2
Video scroll through using custom window scroll listener. Testing YouTube API integration.

2025-1214-2011
YouTube test #3
Video scroll through using GSAP ScrollTrigger. Testing YouTube API integration.

2025-1214-2021

Todos (0)

3D carousel
Old experiment, not finished, needs GSAP Draggable and some finishing touches.

2023-1213-1320
Barba.js test #1

2026-0417-1440
Barba.js test #2

2026-0417-1440
Draggable slider #3
A draggable slider that supports both drag gestures and horizontal trackpad scrolling with slide duplication for continuous navigation.

2026-0624-1042
Kalon #1
Rough hero animation concept for https://kalon.is.

2026-0121-2034
Kalon #2
Rough page intro idea for https://kalon.is.

2026-0121-2330
Kalon #3
Gooey buttons idea for https://kalon.is

2026-0203-1319
Marquee
Infinite scrolling GSAP driven with adjustable speed and direction.
Not working 100% - rtl marquee is not looping properly.

2023-0509-1927
Masking #1

2026-0413-2027
Masking #2

2026-0413-2027
SVG photo filters #1
Experimenting with SVG filter effect.

2019-0923-1822
SVG photo filters #2
Experimenting with SVG filter effect.

2026-0608-1613
tøp-tøur map
Testing mapbox stuff for https://twentyonepilots.is/top-tour web/app.

2026-0304-1758
Tsunami navigation </>
The hovered item expands along with its adjacent siblings.
An old experiment that needs revisiting and improvement.

2014-1216-2203

Tools & games (0)

Hopper
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.

2026-0404-1824
Magic Wand
Click fast enough to win. Not finished, work in progress.

2025-0808-1932
Pong
1972 classic - single player + local versus mode, 3 difficulty settings. Supports keyboard & touch controls.

2026-0911-1958
Tøng
TØP + PONG = TØNG - classic pong - https://ccrch.com/playground/pong - with a |-/ twist.
Made for https://twentyonepilots.is/10-21

2026-0912-1949
Website performance meter </>
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-0127-1515

2026-10 (0)

Refracted glass
A CSS take on refracted glass. Move the mouse around to see the effect.

2026-1005-1157 - CSS tricks
CSS scope
Playing around with @scope & :scope.

2026-1005-1016 - Tests
SVG transform box
Testing SVG transform origins with transform-box & GSAP.

2026-1002-1059 - Tests
Simultaneous key press
Press & hold the keys to shake the screen.

2026-1001-1720 - Experiments
CSS size interpolation
Animating numeric values to keywords with CSS only. Not supported in Firefox & Safari yet.

2026-1001-0936 - CSS tricks

2026-09 (0)

Distica blocks
Hero & accordion blocks - adding animation + some SVG masking. Made for https://distica.is.

2026-0929-0940 - Concepts & designs
Sticky figures #2
Scroll to run.

2026-0928-1632 - Experiments
Sticky figures #1
Scroll to run.

2026-0926-1919 - Experiments
Infinite photo zoom
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.

2026-0925-2210 - Experiments
Masonry layout
Using CSS columns prop.

2026-0925-1056 - CSS tricks
Vettvangur 2026 concept
Rough design & animation draft for https://vettvangur.is 2026 release.

2026-0924-2133 - Concepts & designs
Pinned stacking cards
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.

2026-0918-1339 - CSS tricks
Spiral gallery
A 3D image spiral, driven by GSAP and ScrollTrigger + endless scroll.

2026-0916-1510 - Ideas & inspiration
SVG mouse trail #2
Like a needle and thread, but with a mouse. Move the cursor near the text to pull the thread.

2026-0915-1856 - Experiments
SVG mouse trail #1
A simple, squiggly SVG trail that follows your cursor. Move your mouse around the screen to see it in action.

2026-0915-1824 - Experiments
Simplest datepicker
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.

2026-0915-1425 - CSS tricks
Vertical lines glitch
My screens do this every now and then. I think I need a new dock...
Hover & click the content to see the effect.

2026-0913-1838 - CSS tricks
Tøng
TØP + PONG = TØNG - classic pong - https://ccrch.com/playground/pong - with a |-/ twist.
Made for https://twentyonepilots.is/10-21

2026-0912-1949 - Tools & games
Pong
1972 classic - single player + local versus mode, 3 difficulty settings. Supports keyboard & touch controls.

2026-0911-1958 - Tools & games
Clancy flames
A fiery, grainy background inspired by the Clancy album artwork, animated with Three.js and custom shaders.

2026-0911-0954 - Concepts & designs
Clancy player #2
Second version of the player - different layout + directional hovers.
Draft for https://twentyonepilots.is.

2026-0910-2117 - Concepts & designs
Clancy player #1
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.

2025-0808-1732 - 2026-0910-1640 - Concepts & designs
Image pixel reveal
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.

2026-0910-1236 - Ideas & inspiration
Font shuffle
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.

2026-0910-1005 - Ideas & inspiration
SVG stroke particles
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.

2026-0908-2159 - Experiments
Card stack CTA #2
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.
Click a link to set the active card.

2026-0907-1435 - Ideas & inspiration
Card stack CTA #1
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.

2026-0708-2205 - 2026-0907-1402 - Ideas & inspiration
Pseudo 3D parallax
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.

2026-0903-1331 - Experiments
WebGL fluid simulation
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.

2026-0903-1031 - Experiments
Iframe communication
Iframe & parent window communication - back & forth - using postMessage.

2026-0902-1830 - Tests
Cascading text reveal
Scroll-triggered text reveal with a 3-column cascading sequence & infinite scroll loop.

2026-0902-1408 - Ideas & inspiration

2026-08 (0)

Pill text reveal
Scroll-triggered text reveal with infinite scroll loop.

2026-0813-2059 - Ideas & inspiration
tøp-guess #2
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

2026-0811-2354 - Concepts & designs
tøp-guess #1
Guess the song as fast as you can - rough prototype for https://twentyonepilots.is/9-21

2026-0804-2246 - Concepts & designs

2026-07 (0)

Endless grid gallery
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.

2026-0730-1210 - Ideas & inspiration
Pixelated media
Move your pointer across the media to reveal a sampled pixel trail. Works with jpgs, transparent pngs, and videos.

2026-0727-1425 - Ideas & inspiration
Point light
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.

2026-0720-1813 - CSS tricks
Glitched text reveal
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.
Idea draft for https://apparatus.is 2026 release.

2026-0720-1250 - Concepts & designs
Pixelated text particles
Pixelated canvas text sampled into Three.js particles and scattered across the screen while scrolling down.
Idea draft for https://apparatus.is 2026 release.

2026-0717-2152 - Concepts & designs
Glitched text flicker #2
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.
Idea draft for https://apparatus.is 2026 release.

2026-0717-2106 - Concepts & designs
Dissolving pixel icons
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.

2026-0717-1440 - Concepts & designs
Glitched text flicker #1
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.
Idea draft for https://apparatus.is 2026 release.

2026-0717-1042 - Concepts & designs
Expanding image grid
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.

2026-0716-2039 - Experiments
Endless cards with a scroll loop #2
Improved version of https://ccrch.com/playground/endless-cards-1 with infinite Lenis scroll loop working both ways.

2018-0115-1433 - 2026-0716-2009 - Experiments
Pinned image reveals
A scroll-driven storytelling layout with pinned fullscreen images, circular mask reveals, and animated text.

2026-0716-1742 - Ideas & inspiration
Floating thumbnails layout
Layout concept with floating image thumbnails & scroll-driven parallax movement.

2026-0715-1316 - Ideas & inspiration
Masked image rings
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.

2026-0714-1345 - Ideas & inspiration
Rain #2
PixiJS canvas version of https://ccrch.com/playground/rain-1.

2026-0714-1233 - Experiments
Rain #1
GSAP rain animation with puddle accumulation and splash effects.

2026-0714-1009 - Experiments
Photo wave
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.

2026-0713-2144 - Experiments
Morphing galaxy
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.

2026-0710-2103 - Ideas & inspiration
Projects overview hero
Projects overview hero with animated images & text. Inspired by services section on https://digitalists.at.
Scroll down to see it at work.

2026-0709-1756 - Ideas & inspiration
Image dithering #3
Few image dithering experiments using PixiJS and WebGPU.

2026-0707-2115 - Experiments
Image dithering #2
Few image dithering experiments using PixiJS and WebGPU.

2026-0704-1748 - Experiments

2026-06 (0)

Draggable slider #3
A draggable slider that supports both drag gestures and horizontal trackpad scrolling with slide duplication for continuous navigation.

2026-0624-1042 - Todos
Image dithering #1
Pixi image dithering with some mouse interaction. Move the mouse over the image to see the effect.

2026-0618-1830 - Experiments
Snappy slides
Fullscreen slides with snappy scroll behavior using GSAP observer.

2026-0618-1406 - Experiments
Horizontal headline split </>
Splitting the headline into multiple segments on scroll. Used in https://ccrch.com/playground/inette-layout.

2026-0401-1350 - 2026-0617-2040 - Ideas & inspiration
Split-line hero
Hero section with animated text lines and inline images revealed between words.

2026-0617-1652 - Ideas & inspiration
Noise.gif </>
Animated noise.gif without using an actual .gif file.

2026-0616-2342 - CSS tricks
Lightship hero
Inspired by the hero section on https://lightshiprv.com. Animating clip-paths & scales instead of image positions.

2026-0616-2107 - Ideas & inspiration
Moss mask
Using CSS mask-image to create a spotlight effect on an image. Hover over the image to see the effect in action.

2026-0616-1152 - CSS tricks
Playfight images
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.

2026-0615-1338 - Ideas & inspiration
Playfight hero
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.

2026-0615-1024 - Ideas & inspiration
Playfight links
Inspired by "what we do" section on https://letsplayfight.com website with different text animation & interactions.

2026-0613-2054 - Ideas & inspiration
The White Stripes </>
Minisite prototype for https://twentyonepilots.is/7-21 based on https://ccrch.com/playground/ropes canvas experiment.

2026-0612-1525 - Concepts & designs
Lag gallery
Scroll down to see it in action.

2026-0611-1109 - Ideas & inspiration
Offset gallery
Scroll down to see it in action.

2026-0611-1020 - Ideas & inspiration
Shifting masks </>
Scroll-driven SVG mask animation where each mask path moves independently to reveal the image.

2026-0610-1301 - Ideas & inspiration
Lag & speed </>
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.

2026-0101-1249 - 2026-0610-1021 - Components
Pixi mesh
Playing around with PixiJS mesh and mouse interactions.

2026-0609-1034 - Tests
SVG photo filters #2
Experimenting with SVG filter effect.

2026-0608-1613 - Todos
Draggable slider #2
A draggable slider that supports both drag gestures and horizontal trackpad scrolling.

2026-0608-1401 - Components
Ropes </>
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.

2026-0608-1213 - Experiments
Cookie border
Experimenting with a cookie-style border built using CSS masks and SVG border images. The shape adapts automatically to changing content dimensions.

2026-0601-2107 - Experiments
Nóa Plata ársins
Prototype minisite for Nói Síríus https://plataarsins.is campaign.

2026-0601-1238 - Concepts & designs

2026-05 (0)

Predator: Badlands UI text </>
Inspired by the UI text animation featured in Predator: Badlands movie, around 33 minutes in.
Click on the headline to trigger the animation.

2026-0531-1554 - Ideas & inspiration
GSAP MatchMedia event listeners </>
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.

2026-0526-1705 - Tests
Truce & Intentions </>
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

2026-0512-1450 - Concepts & designs

2026-04 (0)

Kosmos maskots
Maskot animation drafts for https://kosmos.is.

2026-0421-1205 - Concepts & designs
Motion blur </>
SVG motion blur filter in action. Click the box to see the effect.

2026-0421-1044 - Experiments
Barba.js test #1

2026-0417-1440 - Todos
Barba.js test #2

2026-0417-1440 - Todos
Kosmos fur
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.

2026-0415-1435 - Concepts & designs
Kosmos hero
Initial animation/interaction idea for https://kosmos.is. Hover the hero to see it work.

2026-0413-2217 - Concepts & designs
Masking #1

2026-0413-2027 - Todos
Masking #2

2026-0413-2027 - Todos
Kosmos spring morphing
Click either line to morph it into a spring.

2026-0413-0953 - Concepts & designs
Glowing patterns </>
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.

2026-0408-1722 - Experiments
Office life </>
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.

2026-0407-2012 - Experiments
Örninn
Homepage animation draft. Hero video generated from a single image using Kling 3.0.

2026-0406-1909 - Concepts & designs
Létt mjólk
Experimenting with AI-generated video from a single image.
Plays on reveal, then responds to pointer position to control playback.

2026-0406-1648 - Tests
Hopper
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.

2026-0404-1824 - Tools & games
Glowing icons </>
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.

2026-0403-2230 - Experiments
Inette layout
Layout/animation & split headline inspired by https://inette.co

2026-0401-1350 - Ideas & inspiration

2026-03 (0)

Radial headline
Some layout idea - utilizing the radial selector idea. Scroll the page to see it at work.

2026-0331-2239 - Ideas & inspiration
Lyfja animations #2
Animations for 2025 https://lyfja.is release.

2026-0208-2133 - 2026-0331-2159 - Concepts & designs
Smooth animation direction change </>
Smooth animation direction change based on page scroll direction.

2026-0331-0917 - Experiments
Tetrahedron
Playing around with Three.js. Design inspired by https://facebook.com/funlighticeland/ ads.

2026-0326-1436 - Ideas & inspiration
Continuing Care Retirement Community Hub
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! ;)

2026-0325-2214 - Concepts & designs
Radial selector </>
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.

2026-0325-1517 - Ideas & inspiration
H verslun
Homepage animation draft. Experimenting with AI-generated video from a single image & using scroll position to control video playback.

2026-0323-1437 - Concepts & designs
Lyfja animations test
Testing DrawSVG stuff.

2025-1203-0850 - 2026-0319-1002 - Tests
Stacking words </>
Inspired by "About us" section on https://sirnik.webflow.io website.

2026-0317-0804 - Ideas & inspiration
Flowfest lines </>
Inspired by https://flowfest.co.uk layout design elements.

2026-0312-2250 - Ideas & inspiration
Vertical headline split </>
Inspired by intro section on https://tadesign.nl website.

2026-0312-1758 - Ideas & inspiration
Fluid presentation iframe </>
Made to record a video.

2026-0310-1716 - Tests
Deferred hash scroll
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.

2026-0310-1235 - Experiments
tøp-tøur teaser
Prototype for a teaser page for https://twentyonepilots.is/top-tour web/app.

2026-0309-2203 - Concepts & designs
Testimonial slider </>
Inspired by Osmo testimonial/text slider with GSAP SplitText reveal animations.
Original idea here - https://osmo.supply/preview?resource=line-reveal-testimonials

2026-0307-1237 - Ideas & inspiration
tøp-tøur map
Testing mapbox stuff for https://twentyonepilots.is/top-tour web/app.

2026-0304-1758 - Todos
Conic-gradient pie chart </>
Animated conic-gradient pie chart built with pure CSS. Super simple, minimal markup, zero JavaScript.

2026-0301-1145 - CSS tricks

2026-02 (0)

tøp-acrøss #2
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.

2026-0227-2009 - Concepts & designs
Coloring images
Recoloring images with CSS filters - same png, different appearance.
Implemented on https://www.noi.is/forskot-a-paskana.

2026-0227-1005 - CSS tricks
Kalon teaser
Pre-release teaser site for https://kalon.is.

2026-0224-1607 - Concepts & designs
Seamless image loop </>
Fading & scaling image loop with seamless overlap transition.
Used on https://kalon.is frontpage.

2026-0224-1607 - Experiments
Animated radial gradient </>
Made for https://kalon.is.

2026-0222-1901 - CSS tricks
Kalon frontpage
Frontpage mockup for https://kalon.is.

2026-0222-1901 - Concepts & designs
Backdrop blur marquee </>
Simple marquee with layered backdrop-filter strips that create a soft depth/spotlight effect over moving text.

2026-0215-2050 - CSS tricks
Nóa Páska
Minisite for 2026 Easter campaign - https://www.noi.is/forskot-a-paskana

2026-0208-2248 - Concepts & designs
Custom scrollbar </>
A draggable custom scrollbar that works with native scrolling, Lenis, GSAP ScrollSmoother, and likely any other scrolling library out there.

2026-0204-1231 - Components
Respect user's motion preference
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

2026-0204-1042 - Experiments
Chocolate curtain </>
Gooey effect using SVG filters & GSAP Morph SVG plugin.
Made for https://noi.is 2026 Easter campaign.

2026-0203-2131 - Concepts & designs
Kalon #3
Gooey buttons idea for https://kalon.is

2026-0203-1319 - Todos

2026-01 (0)

Website performance meter </>
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-0127-1515 - Tools & games
Ccrch #26 </>
2026 release of https://ccrch.com.

2026-0126-0221 - Concepts & designs
GSAP ScrollTriggers done right </>
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.

2026-0125-1649 - Tests
Kalon #2
Rough page intro idea for https://kalon.is.

2026-0121-2330 - Todos
Kalon #1
Rough hero animation concept for https://kalon.is.

2026-0121-2034 - Todos
Kosmos spring
Logo interaction idea for https://kosmos.is. Drag it to see the effect.

2026-0119-1723 - Concepts & designs
Turntable
Spinning the table instead of the record - concept for https://twentyonepilots.is/2-21.

2026-0115-0136 - Ideas & inspiration
Vettvangur 2025 page transitions
Shapes in/out transition on page load/unload.

2026-0105-1003 - Concepts & designs

2025-12 (0)

SVG 9-slice scaling </>
Responsive card design for https://raudikrossinn.is.
Super simple & basic SVG 9-slice scaling using only CSS & SVG as border-image.

2025-1230-1922 - CSS tricks
tøp-acrøss #1
First prototype for https://twentyonepilots.is/top-across
Teaser for the app - https://twentyonepilots.is/4-21

2025-1225-2121 - Concepts & designs
Slide scroller #3
#2 + appending slides.

2025-1217-1443 - Tests
Slide scroller #2
Improved, better trackpad & scroll momentum handling.

2025-1217-1413 - Tests
Slide scroller #1
Initial version. Simple scroll snapping.

2025-1217-1402 - Tests
Chromo Sapiens #2
Same with slightly different scroll sync approach.

2025-1215-2140 - Experiments
YouTube test #3
Video scroll through using GSAP ScrollTrigger. Testing YouTube API integration.

2025-1214-2021 - Tests
YouTube test #2
Video scroll through using custom window scroll listener. Testing YouTube API integration.

2025-1214-2011 - Tests
Chromo Sapiens #1
Testing GSAP video scroll synchronization with ScrollTrigger + additional content.

2025-1213-2130 - Experiments
Scrambled text animation
Made for https://brand.vettgvangur.is typography section. Click the text to repeat the animation.

2025-1209-1154 - Concepts & designs
Lyfja animations #1
Showcase of drafts and animation ideas for 2025 https://lyfja.is release.

2025-1208-1504 - Concepts & designs
tøp-lines
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

2025-1204-2121 - Concepts & designs
Macbook mockup
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.

2025-1203-1705 - Experiments

2025-11 (0)

3D logo </>
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.

2025-1128-1015 - Concepts & designs
Nói Siríus email template </>
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.

2025-1126-1247 - Concepts & designs
Barrel text
Text effect created for https://egilshollin.is - not really finished yet & doesn't work quite as intended.

2025-1120-1123 - Experiments

2025-10 (0)

Calendar
Playing around with GPT - did pretty good - simple calendar implementation made with pretty much one prompt.

2025-1027-2140 - Experiments
Nóa Konfekt
Minisite for 2025 Christmas campaign - https://www.noi.is/konfektid-okkar-i-90-ar

2025-1009-1520 - Concepts & designs

2025-08 (0)

Magic Wand
Click fast enough to win. Not finished, work in progress.

2025-0808-1932 - Tools & games
Scusso typeface </>
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

2025-0808-1620 - Ideas & inspiration
Liquid glass
Playing around with the latest iOS glass effect hype.
Drag buttons around to see the distortion effect, there are 4 different filter effects.

2025-0808-1319 - Tests

2025-06 (0)

CSS tricks bundle
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.

2025-0611-1330 - CSS tricks
The Last of Us buttons </>
Inspired by the game UI design.

2025-0606-1909 - Ideas & inspiration
YouTube test #1
Looped short. Testing YouTube API integration.

2025-0606-1811 - Tests

2025-05 (0)

SVG mask-image animation
Effect created for https://vettvangur.is 2025 release. Code still needs some work.
Improved version on https://brand.vettvangur.is.

2025-0528-1341 - Ideas & inspiration
Fluid Responsive Web Design & Development </>
An animated breakdown of fluid responsive web design, including practical examples and a live resize listener demonstrating the approach in action.

2025-0501-0844 - Concepts & designs
Fluid Responsive Web example </>
Rem based layout - example of fluid responsive web design in action.

2025-0501-0844 - Concepts & designs

2025-04 (0)

Radarinn
Page load animation idea for https://radarinn.is.

2025-0423-1627 - Concepts & designs
Explorio
Visual, layout, and animation draft for a travel planning minisite.

2025-0417-1630 - Concepts & designs

2025-03 (0)

SVG text on path animation </>
Seamless text animation, used on https://hareyding.is. Text can travel on any SVG path shape you want.

2025-0327-1042 - Components
Background clip text #2
Same as #1 + a little bit of GSAP. Click the text to see the effect.

2025-0307-1443 - CSS tricks
Hómer concept
Layout draft for a real estate minisite. Finished project on https://homerapp.is.

2025-0302-1238 - Concepts & designs

2025-02 (0)

KSÍ banner
Draft for animated banner for KSÍ website. Finished project on https://ksi.is.
Website performance meter added here for testing purposes.

2025-0227-1630 - Concepts & designs
Pinning test
ScrollTriggers test with different types of scroll - trying to figure out best way to avoid jumpy/glitchy pins on mobile.

2025-0227-1102 - Tests

2024-11 (0)

Boombox
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.

2024-1122-2048 - Ideas & inspiration

2024-10 (0)

Skewy cursor
Cursor that morphs based on movement direction and speed.

2024-1030-1723 - Tests
Article index </>
Automatically generated article index with scroll-to and active link highlighting.
Used in https://vettvangur.is/blogg section.

2024-1029-1530 - Components
Background clip text #1
Hover the text to see the effect.

2024-1028-1554 - CSS tricks
Masked text
Playing around with text, image & mix-blend-mode. Hover the text to zoom in the image.

2024-1022-1331 - CSS tricks
Draggable slider #1
Needs some work & adjustments, then it'll be available on CodePen - version on https://brand.vettvangur.is works slightly better.

2024-1015-1524 - Components
Ljúfa líf lines </>
SVG line animations for https://ljufalif.is.

2024-1015-1004 - Concepts & designs
Text slide links
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.

2024-1010-1721 - CSS tricks

2024-09 (0)

Vettvangur 2025
Website flow & animation draft for https://vettvangur.is 2025 release.

2024-0926-1003 - Concepts & designs
Priority navigation
Perfectly fits navigation elements into available space.
Resize the window to see it in action.
Just need to tweak a few things, then it'll be available on CodePen.

2024-0925-1036 - Components
Content masks </>
Testing some in/out animation effects.

2024-0909-1056 - Tests
Magnetic goo
Gooey shapes with magnetic cursor. Click anywhere to reset.
Doesn't work on iOS (yet).

2024-0905-1244 - Experiments
Proximity hovers
Pretty cool effect where elements react to cursor proximity.

2024-0905-0928 - Experiments

2024-07 (0)

Vettvangur 2024 sticky sections </>
Layout/page idea with sticky sections, parallax images & marquee text effect.
Meant for https://vettvangur.is 2024 release.

2024-0703-1621 - Concepts & designs

2024-06 (0)

Page zoom transition
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.

2024-0630-1042 - Ideas & inspiration

2024-05 (0)

Lighthouse test </>
Trying to cheat Lighthouse performance scores. Kinda works, but not really, not a recommended practice for sure.

2024-0529-1048 - Tests
Bubble page transition
Seamless bubble in/out transition between pages.

2024-0527-0842 - Ideas & inspiration
Vettvangur 2024 </>
Hero and reel section design & animation draft for https://vettvangur.is 2024 release.

2024-0515-0911 - Concepts & designs

2024-04 (0)

Automated items reveal
Revealing items on page load/scroll. Used in https://lsr.is and https://npi.int.

2024-0420-1233 - Components
Timeline diary
Minisite idea for scrollable photo album with dated events & headlines.

2024-0417-2015 - Ideas & inspiration
Apparatus 2024 concept
Rough sketch & some testing. Finished work on https://apparatus.is.

2024-0417-0945 - Concepts & designs

2024-03 (0)

EM based layout
100% responsive & fluid - scales proportionally to window size so no headeaches with tons of breakpoints or text wrapping issues.

2024-0319-0937 - Experiments
Bubbly particle trail </>
Mouse driven particle trail with velocity based emission.

2024-0307-1256 - Components
Split text reveal </>
Originally created for https://welladvised.is 2023 release.

2024-0307-1146 - Concepts & designs

2023-12 (0)

3D carousel
Old experiment, not finished, needs GSAP Draggable and some finishing touches.

2023-1213-1320 - Todos
Live icons #2
Full set of icons made for https://live.is. Click the icon to see the animation.

2023-1206-1209 - Concepts & designs
Swup
Experimenting with swup in/out transitions - different stuff happening on each page.

2023-1204-1448 - Experiments

2023-09 (0)

Atlantsolía layout
Fluid vw based layout concept for 2023 AO website - finished project on https://atlantsolia.is.

2023-0921-1421 - Concepts & designs

2023-08 (0)

Atlantsolía intro animation
Animation draft for https://atlantsolia.is 2023 release.

2023-0831-1204 - Concepts & designs
Netgíró menu
Navigation for 2023 release of https://netgiro.is.

2023-0831-1149 - Concepts & designs

2023-05 (0)

Marquee
Infinite scrolling GSAP driven with adjustable speed and direction.
Not working 100% - rtl marquee is not looping properly.

2023-0509-1927 - Todos
Domino's Netdagar
Homepage banner for 2023 https://dominos.is ad campaign.

2023-0509-1201 - Concepts & designs
Vettvangur 2023
Rough draft for https://vettvangur.is 2023 release.

2023-0504-0920 - Concepts & designs

2023-02 (0)

Bubbly fireworks </>
Originally created for https://heilsueflandi.is, also used on https://velvera.is.

2023-0201-1157 - Components

2023-01 (0)

Live icons #1
Icon animations for https://live.is - this was just the initial draft.
Click the icon to see the animation.

2023-0130-1347 - Concepts & designs
HS Orka elements
Page elements for 2023 HS Orka website.

2023-0125-1236 - Concepts & designs

2017-2022 (0)

Iceland Airwaves 2022
Web banner for Iceland Airwaves 2022 ad campaign. Hover the banner to see the animation.

2022-1030-0950 - Concepts & designs
Smooth scroll without ScrollSmoother </>
GSAP ScrollTrigger based smooth scrolling that adapts to device input - GSAP on desktop, native on mobile.
No ScrollSmoother plugin used.

2021-1008-1927 - Experiments
Video scroll
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.

2019-1213-2305 - Experiments
Windows configurator
Early draft of an e-commerce solution. Not finished - only the first three steps are implemented.

2019-1010-1147 - Ideas & inspiration
Print (-ed animation)
Just hit Ctrl/Cmd + P to see what it's all about... & flip 'em pages!
Best experienced using PgDn. :)

2019-1004-1042 - Experiments
Cookie, cookie, cookie...
...cookie, cookie!!! Playing around with https://brm.io/matter-js/ 2D physics engine. Made for https://vettvangur.is 2019 release.

2019-0924-1619 - Concepts & designs
SVG photo filters #1
Experimenting with SVG filter effect.

2019-0923-1822 - Todos
Domino's Megavika
Parallax SVG animation for 2019 https://dominos.is ad campaign.
Responsive to mouse movement on desktop & device orientation change on mobile.

2019-0810-0944 - Concepts & designs
Shortest route between points </>
Click any point to find shortest route through all points.
Route shown initially is the shortest possible from all given points.

2018-1219-2003 - Experiments
Lobster typeface </>
Animated typo experiment inspired by typography from the 2018 release of http://lobstersnowboards.com.

2018-0919-2317 - Ideas & inspiration
Scroll velocity driven background
Scroll the page to see the effect.

2018-0831-2215 - Experiments
Pixel boom
Click the text to see the effect.

2018-0423-1955 - Experiments
Accordion
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.

2018-0321-1230 - Components
Fixed clipped headings
Experimenting with fixed position headings & clipping masks.

2018-0223-1048 - Experiments
Crawling line
Another oldie - needs some refactoring & tweaking.
Line animates to selected link adjusting to link width & position - 2 modes.

2018-0216-1930 - Experiments
Chevron to box </>
Quite an old thing, 2018, but still fun to look at - might refactor it some day & find some use for it.

2018-0214-2213 - Experiments
Rocket fly by
CSS rocket emitting DOM particles. Animated with GSAP.

2018-0122-1127 - Experiments
Gradient background </>
Background gradient moves as you scroll the page down.

2018-0116-2314 - Experiments
Endless cards with a scroll loop #1 </>
Endless loop of cards with image preloading. Scroll down to continuously reveal the next card with smooth, uninterrupted transitions.

2018-0115-1433 - Experiments
Scroll looper </>
Scroll, scroll, scroll...

2018-0115-1433 - Experiments
Timeline based scroll animation
Built with GSAP 2.x (pre-GSAP 3 syntax, TweenMax era). Made 3 years before ScrollTrigger was introduced.

2017-1010-0950 - Experiments
Kosmos & Kaos logo animation </>
Logo animation for https://kosmosogkaos.is.

2017-0929-0944 - Concepts & designs

2014-2016 (0)

Skapalón logo 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/

2016-1001-1237 - Concepts & designs
External link icon </>
Animated box with & arrow indicating an external link. Old stuff, needs some refactoring.

2016-0824-1928 - Components
Game Continu.es </>
Logo animation concept for https://gamecontinu.es game dev studio.

2016-0815-2130 - Concepts & designs
Responsive collapsible grid </>
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).

2016-0625-1033 - Concepts & designs
LinkedIn corner widget </>
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.

2016-0403-1611 - Concepts & designs
Siteception </>
We need to go deeper...

2016-0331-2346 - Experiments
Reykjavik.rocks </>
Complete source code for an old 2015 minisite - https://reykjavik.rocks
Using YouTube api for background video + few css transitions for nice look & feel.

2015-0411-1131 - Concepts & designs
Perspective shift
Shift effect based on cursor position. Old thing, needs some polishing.

2015-0203-2105 - Experiments
Zoom & pan on hover </>
Zoom scale controled with data attribute. Panning follows the mouse position on hover.

2014-1229-0833 - Experiments
Tsunami navigation </>
The hovered item expands along with its adjacent siblings.
An old experiment that needs revisiting and improvement.

2014-1216-2203 - Todos

Select project Select project

2026-1005-1408

2026-0401-1350

LoremLoremLoremLorem

↓

IpsumIpsumIpsum

Sed magna dolore incididunt aliqua sed labore amet ipsum sit eiusmod sed sed aliqua dolore dolor amet amet dolor amet sit

DolorDolorDolor

Aliqua magna consectetur do consectetur elit do dolor ipsum do sed aliqua dolore incididunt magna consectetur dolor incididunt sit sit incididunt

Sit ametSit ametSit amet

Adipiscing ipsum ipsum aliqua et dolore amet amet elit eiusmod dolor sed eiusmod eiusmod eiusmod dolore aliqua ipsum aliqua aliqua adipiscing

JustoJustoJustoJusto

Lorem ipsum

Dolor sit amet

Consectetur

Adipiscing elit

Lorem ipsum

Dolor sit amet

Consectetur

Adipiscing elit