Skip to content

Interface and motion experiments

Animation, interaction and design explorations created in CodePen.

Kinetic interface

CodePen

Exploration of motion and visual response in interactive components.

JavaScriptCSSAnimation

State transitions

CodePen

Micro-interactions designed to improve visual feedback and control.

JavaScriptCSSUI

Component lab

CodePen

Prototype focused on dynamic behavior and live style tuning.

JavaScriptCSSComponents

Interactive scene

CodePen

Visual experiment focused on hierarchy, layers, and immersion.

JavaScriptCSSVisual

Motion playground

CodePen

Experimenting with rhythm, easing, and sequencing for fluid interfaces.

JavaScriptCSSUX

Responsive prototype

CodePen

Adaptive behavior tests across different viewport sizes.

CSSResponsiveLayout

Chained animations

CodePen

Coordinated animation sequences to reinforce visual storytelling.

JavaScriptCSSAnimation

UI event control

CodePen

Interaction tests based on events with immediate response behavior.

JavaScriptDOMUI

Interface patterns

CodePen

Collection of visual resources applied to UI experiments.

CSSUI DesignFront-End

Button balls

CodePen

Button experiment with physical behavior and real-time animated feedback.

JavaScriptCSSInteraction

Layout exploration

CodePen

Block composition and spacing system for complex screens.

CSSGridLayout

Advanced hover effects

CodePen

Hover variations focused on clarity, contrast, and micro-feedback.

CSSJavaScriptMicrointeraction

Dynamic UI

CodePen

Interface experiment prioritizing readability and controlled motion.

JavaScriptCSSUI

Interactive cards

CodePen

Card component test focused on content hierarchy.

CSSJavaScriptComponents

State and transition

CodePen

State-change evaluation for predictable interaction behavior.

JavaScriptUIUX

Visual composition

CodePen

Exercise in rhythm and balance applied to functional elements.

CSSDesignFront-End

Progressive interaction

CodePen

Scales interactions from simple actions to richer flows.

JavaScriptDOMUX

Visual accessibility tests

CodePen

Contrast, sizing, and feedback adjustments for better comprehension.

CSSAccessibilityUI

Navigation experiment

CodePen

Alternative navigation patterns focused on path clarity.

JavaScriptUIArchitecture

Style system

CodePen

Visual consistency test and reusable typography patterns.

CSSDesign SystemUI

Idea canvas

CodePen

Sandbox to validate visual concepts quickly.

JavaScriptCanvasCreativity

Modular patterns

CodePen

Decoupled UI blocks for faster prototype iteration.

JavaScriptCSSModular

Timed interactions

CodePen

Timing and delay experiments to guide user attention.

JavaScriptAnimationUX

Typography lab

CodePen

Hierarchy exploration combining typography and dynamic elements.

CSSTypographyDesign

Narrative prototype

CodePen

Combines motion and content to tell a visual story.

JavaScriptCSSStorytelling

Reactive interface

CodePen

Real-time behavior adjustments based on user actions.

JavaScriptStateUI

Collection finale

CodePen

Final experiment in the set with a synthesis of visual and technical resources.

JavaScriptCSSCodePen