10가지 멋진 CodePen 데모 (2025년 11월)
Source: Dev.to
Blue Agori (480 bytes)
480 바이트의 코드로 무엇을 그릴 수 있을까요? Bence Szabo의 데모를 확인하면 답은 “놀라운 것들!” 입니다. SVG 값을 업데이트하고 이 일러스트레이션의 자신만의 버전을 만들어 보세요.
Interactive GLSL Shader Fire Spiral Animation in WebGL
이 나선형 셰이더는 인터랙티브합니다! 마우스를 움직이면 불꽃 모양이 마우스를 향해 왜곡됩니다( y축이 약간 어긋날 수 있습니다). 부드러운 애니메이션과 디자인. Techartist가 만든 환상적인 작품입니다.
CSS Landscape
Gemma Croad는 CSS 그라디언트와 clip-path를 사용해 멋진 풍경을 코딩했습니다. 결과는 코드의 단순함만큼이나 아름답습니다.
Direction‑aware Arrow Shape
CSS shapes에 대한 실험의 일환으로, Temani Afif는 텍스트 방향에 따라 일러스트가 변하는 데모를 만들었습니다. JavaScript나 다른 언어를 사용하지 않았으며, 물리적 속성 대신 논리적 속성을 활용한 것이 마법입니다. 깔끔한 트릭이죠.
Circular Carousel
Ryan Yu의 원형 캐러셀은 인상적이었습니다. 베르메르 그림을 전시할 뿐만 아니라 (플러스), 부드러운 스크롤과 스냅을 제공하며 GSAP으로 애니메이션이 잘 구현되었습니다. 스크롤 기반 애니메이션과 결합하면 더욱 눈에 띄는 효과를 낼 수 있습니다.
CSS Color Picker
2026년이 다가오고 있지만, 브라우저가 제공하는 구식이고 투박한 기본 색상 선택기에 머물 필요는 없습니다. Adam Argyle이 공유한 색상 선택기 컴포넌트는 정말 매끄럽게 동작합니다.
A Cute Cat Select with Auto‑Tail Assist
Marcel은 지금까지 본 것 중 가장 멋진 커스텀 셀렉트를 제작했습니다: 귀여운 일러스트, 섬세한 인터랙션, 디테일이 풍부합니다. 정말 훌륭합니다! 참고: 대부분의 마이크로 인터랙션은 모든 브라우저에서 동작하지만, 꼬리 효과는 현재 Chrome에서만 작동합니다.
Details Element as Turnable Cards
Cyd Stumpel은 <details> 요소를 카드 형태로 바꿔, 열릴 때 뒤집히도록 하는 새로운 접근 방식을 시도했습니다. 전통적인 확장/축소 방식과는 다른 흥미로운 변형이며, 디테일에 신경을 썼습니다. 정말 멋진 데모입니다.
CSS shape() with path() Fallback – SOS
ikrProjects의 이 애니메이션은 GSAP을 사용해 흑백 보트를 부드럽게 움직입니다. 데모의 흥미로운 점은 shape()을 이용해 보트를 그린 뒤, shape()이 지원되지 않을 경우 polygon()으로 대체한다는 점입니다. 참고: 이 데모는 Chrome에서 가장 잘 동작합니다.
Animate Clip‑path
Mariana Beldi는 clip-path와 컬러풀한 SVG 내부 요소들을 활용해 로드 시 점진적으로 표시되는 효과를 구현했습니다. 이 효과는 멋지고 포스터 테마 프레젠테이션에 딱 맞습니다.