Free.Atelier 고급 효과 실험실
← 움짤공방 ✒️ 벡터 아뜰리에

LAB · EXPERIMENTAL EFFECTS

고급 효과 실험실

양산공장 본 화면과 분리된 실험 페이지예요. Beam·Metal·Canvas UI·OriginKit 같은 서비스들의 스타일을 순수 CSS/Canvas 2D로 재현했어요. 외부 라이브러리는 하나도 안 쓰기 때문에 Cloudflare Pages에 가볍게 그대로 붙습니다.

1
스타일 프리셋라이브러리 이름 대신 분위기로 고르세요 — 아래 효과 데모 색이 바뀝니다
2
Beam 스타일 재현버튼·카드 테두리를 따라 빛이 도는 효과 — 순수 CSS(@property + conic-gradient)
미리캔버스 검수 통과 4색 · 63KB · 이상 없음
CSS 코드 보기 

      

    


    
    

      

        3
        
Metal 스타일 재현액체 금속 반사 · 광택이 흐르는 효과 — 순수 CSS 다중 그라디언트

        
      

      

        
        

          Free.Atelier
          PLATINUM EDITION
        

      

      

        CSS 코드 보기
        

      

    


    
    

      

        4
        
Canvas UI 스타일 재현Canvas 2D로 흐르는 광원 — WebGL 라이브러리 미사용, getContext 실패 시 CSS 그라디언트로 자동 폴백

        
      

      

        

          
          
Canvas 미지원 · CSS 그라디언트 폴백

          

            양산공장 프리뷰
            16 / 44 완료 · 처리 중
          

        

      

      

        JS + HTML 코드 보기
        

      

    


    
    

      

        5
        
OriginKit 스타일 재현스크롤 진입 시 카드 순차 등장 — IntersectionObserver + CSS transition (프레임워크 컴포넌트 미사용)

        
      

      

        

          
1 · 프롬프트주제 → 요소 분해

          
2 · 배경 따내기흰 배경 → 투명 PNG

          
3 · 자동크롭바짝 크롭 · DPI 유지

          
4 · 벡터공방SVG · 색상 정리

          
5 · 업로드미리캔버스 판매

        

        
      

      

        JS + CSS 코드 보기
        

      

    


    
    

      실험실 안내
      
이 페이지의 효과들은 본 양산공장 화면에는 적용되지 않아요 — 무거워지거나 사용자를 방해할 수 있어서 GPT 검토 결과 격리했어요. 마음에 드는 효과가 있으면 CSS를 복사해서 직접 원하는 곳에 붙이거나, 저(Claude)에게 "이 효과를 저장 버튼에 넣어줘"라고 알려주세요.

      
· 네 효과 모두 Beam/Metal/Canvas UI/OriginKit의 실제 라이브러리가 아니라 그 스타일을 순수 CSS·Canvas 2D로 재현한 것이에요. 외부 의존성이 없어 저장소·배포 크기 변화가 없어요. · prefers-reduced-motion 사용자에게는 모든 장식 모션이 자동으로 꺼져요. · Canvas 미지원 브라우저에서는 CSS 그라디언트로 자동 폴백돼요.