Back to portfolio

CodeLune Feature Lab

Explore buildable features

A small lab of interactions that can be added to websites and web apps.

Hover to preview

24 FEATURES
3DINTERACTIONPlay preview
Orbit 3D CodeLune
3DSCROLLScroll to draw
Scroll draw CodeLuneA 3D outline that fills as you scroll
3DPOINTERMove and press
Kinetic hierarchyA layered scene that responds to movement and press
3DPARTICLESMove and press
Rainbow particle cloudA particle cloud driven by pointer speed and press
3DIMAGEPress to change image
Portfolio particle globeA portfolio thumbnail morphing into a particle globe

웹사이트를 만드는
CodeLune

TYPOGRAPHYHover to play
Scramble headlineNatural transitions for brand messaging
Open the 3D atlasInteractive 3D atlas
3DDENTAL ATLASOpen the 3D atlas
Carlow Dental 3D atlasThe live 3D main view from the Carlow Dental Implant project
IMAGEGESTUREScroll or drag
Heritage image surf3D image planes controlled by wheel and drag
IMAGETRANSITIONUse the arrows
Image transitionDirectional enter and exit transitions for images
IMAGESCROLLScroll to try
Scroll hide headerA header that hides and returns with scroll direction
IMAGEAUTOPLAYAutoplay
Autoplay image carouselAn autoplay carousel with a progress indicator
IMAGETHUMBNAILSChoose a thumbnail
Thumbnail image viewerA viewer controlled by image thumbnails
IMAGEDRAGSwipe the image
Swipe image stackSwipe the top image to send it to the back
BASE UIINTERACTIONAuth stack · Open
Auth stackEmail verification and code handoff
BASE UIINTERACTIONConditional field · Open
Conditional fieldReveal the next input when needed
BASE UIINTERACTIONScroll reveal · Open
Scroll revealReveal copy in step with scroll
BASE UIINTERACTIONScramble · Open
ScrambleNatural transitions for a headline
BASE UIINTERACTIONCommand palette · Open
Command paletteSearchable actions with a shortcut
BASE UIINTERACTIONCopy button · Open
Copy buttonA button with a clear copied state
BASE UIINTERACTIONConfetti · Open
ConfettiA celebratory completion moment
BASE UIINTERACTIONRadial menu · Open
Radial menuActions that expand from a center
BASE UIINTERACTIONCreate grid · Open
Create gridA grid for choosing what to create
BASE UIINTERACTIONAnimate number · Open
Animate numberA clear transition for changing values
BASE UIINTERACTIONMega menu · Open
Mega menuAn expanded menu for service discovery