Leviar

① 패럴랙스 데모

카메라 이동에 따른 z깊이 패럴랙스 스크롤링 효과

② 텍스트 마크업

<style> 마크업, width/height, word-wrap, 클리핑, textAlign

③ 에셋 렌더링

LeviarImage, Sprite 애니메이션, Placeholder

④ 파티클

일반 모드(velocity 시뮬레이션) vs strict 모드(matter-js 물리)

⑤ 애니메이션

객체 속성 보간, 이징 함수, 복합 대입 연산자, 색상 보간 및 순수 Animation 모델 테스트

⑥ 물리 엔진

바닥 정적 객체, 떨어지는 동적 상자, 클릭 이벤트 힘 가하기 테스트

⑦ 3D 회전 및 Pivot

X, Y축을 이용한 3D 카드 뒤집기 애니메이션 및 마우스 휠 카메리 회전 테스트

⑧ 우주 공간 유영

3D 좌표에서의 카메라 이동 및 별 파티클 유영 테스트

⑨ 블렌드 모드

source-over, lighter, multiply, screen 등 객체의 합성 방식 테스트

⑩ 객체 추적 (Follow)

LeviarObject.follow를 이용하여 다른 객체를 일정 간격으로 따라다니는 데모 및 타겟 변경(덮어쓰기) 기능 확인

⑪ 자식 객체 (Child)

LeviarObject.addChild를 이용하여 마치 3D 씬 그래프처럼 부모의 위치, 회전, 크기 변화를 그대로 물려받는 데모

⑫ 크로스페이드 (Transition)

LeviarImage 객체의 이미지 전환 시 부드럽게 크로스페이드되는 효과 테스트

⑬ 객체 삭제 (Remove)

좌클릭으로 물리 객체 생성, 우클릭으로 제거하며 메모리 및 물리 엔진 정리 확인

⑭ 그라디언트 (Gradient)

linear 및 circular 그라디언트 적용과 크기, 회전 변화 시 렌더링 검증

⑮ 재생 속성 제어

Sprite 및 Video 객체의 playbackRate, currentTime 조절 및 조작 테스트

⑯ 비주얼 노벨

calcDepthRatio를 사용한 꽉 찬 배경과 그래디언트 대사창

⑰ 모서리 곡률 (Border Radius)

borderRadius와 border, outline, boxShadow, gradient 연동 테스트

⑱ 복합 선택자 (Selector)

world.select를 사용한 ID, Class, Attribute, Dataset 복합 검색 및 객체 조작 테스트

⑲ 내부 투과 (Hollow Border)

투명한 도형에서 테두리(Border), 외곽선(Outline), 그림자가 본체를 덮어씌우지 않고 내부가 정확히 뚫리는 마스킹 기능 렌더링 검증

⑳ 알파 외곽선 (Alpha Outline)

캐릭터 이미지의 알파채널 경계를 따라 border, outline, boxShadow가 렌더링되는 기능 검증

㉑ 최소/최대 크기 (Min/Max Size)

객체의 minWidth, maxWidth, minHeight, maxHeight 제약이 width/height 값보다 우선하여 적용되는지 테스트

㉒ 디버그 모드 (Debug Mode)

디버그 모드 활성화 시 Hover 시각화, Z-Depth 외곽선 색상, 히트 박스, 리플 효과 등을 렌더링하는 테스트

㉓ 오버플로우 (Overflow)

자식 요소가 부모 영역을 넘어갈 때 잘라내는 (클리핑) 기능 렌더링 검증

㉔ 통합 배경 (Background)

단색(Color), 이미지(url, auto/cover/contain), 그라디언트(linear/radial) 통합 렌더링 테스트