5분 만에 프로덕션급 3D 메인 비주얼.
프롬프트를 입력하고 말로 다듬은 뒤, 코드 한 줄만 붙여넣으세요. 랜딩 페이지에 용량과 60fps에 최적화된 3D 배경이 생깁니다.
최적화된 용량 · 60fps
이용 방법이용 방법
프롬프트에서 프로덕션까지 세 단계
1
1. 프롬프트 입력
"어두운 SaaS 랜딩을 위한 보랏빛 파티클 필드" — 필요한 입력은 이것뿐입니다.
2
2. 말로 다듬기
"더 느리게, 인디고 톤으로" — 수정할 내용도 프롬프트로 입력합니다.
3
3. 코드 한 줄 붙여넣기
<script async src="…/hero3d.js"
data-scene="scn_XXXXXXXX"></script>적용 전 / 적용 후
같은 랜딩, 5분의 차이
적용 전
적용 후
제공 기능
직접 하면 2주 걸릴 프로덕션 작업을 미리 끝냈습니다
최적화된 번들
가볍게 설계하고 빌드할 때마다 용량을 측정합니다.
모바일에서도 60fps
기기에 맞춰 품질을 자동 조절합니다.
다크·라이트 모드 대응
페이지 테마를 감지해 자연스럽게 전환합니다.
동작 줄이기 설정 지원
정지 프레임으로 대체 — 메인 비주얼이 비는 일은 없습니다.
WebGL 폴백
WebGL이 실패하면 CSS 그라디언트로 대체해 페이지를 안정적으로 유지합니다.
소유할 수 있는 코드
에디터 없음, 락인 없음.
연동
한 줄. 어떤 스택이든.
코드 한 줄이면 페이지에 바로 렌더링됩니다. iframe도 별도의 빌드 과정도 필요 없습니다. React에서는 같은 로더를 컴포넌트로 사용할 수 있습니다. 어느 방식이든 생성 코드가 아닌, 스키마 검증을 거친 설정으로 씬을 전달합니다.
<script async src="https://hero3d.app/embed/v1/hero3d.js" data-scene="scn_XXXXXXXX"></script>
템플릿
템플릿 10종, 동일한 성능 기준
계속 추가됩니다
템플릿은 지속적으로 추가될 예정입니다 — 새 템플릿도 같은 예산·테마·폴백 게이트를 통과한 뒤에야 여기에 실립니다.
10종 모두 같은 성능 기준과 테마·폴백을 지원합니다. 카드를 누르면 해당 프롬프트로 시작합니다.
가격
무료로 시작하고, 배포할 때 결제하세요
무료
유료
생성 1회 = 3크레딧 · 수정 1회 = 1크레딧 · 씬 다운로드 1건 = 30크레딧