Overview
This prompt guides developers in creating an interactive website featuring a 3D animated suitcase. Programmers and web designers will benefit from the structured requirements and implementation details.
Prompt Overview
Purpose: This website aims to showcase a 3D animated suitcase model while providing product information and company details.
Audience: Targeted towards consumers interested in innovative luggage solutions and engaging online shopping experiences.
Distinctive Feature: The site features a dynamic suitcase that animates and changes color based on user interaction.
Outcome: Users will enjoy a visually appealing experience that enhances product engagement and encourages exploration of the site.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Animation & VFX, Content & Media Creation, Development Tools & DevOps
- Techniques: Few-Shot Prompting, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Create a website containing the following pages:
– Home
– Produk (Products)
– About Us
– Contact Us
The homepage should feature a WOW 3D animated Model Viewer showcasing a suitcase (koper).
**Key Requirements:**
– The product suitcase on the homepage should animate and move to the detailed product section as the user scrolls down the landing page.
– The suitcase must dynamically adapt its color based on the color of the buttons on the page.
**# Steps**
1. Design a homepage integrating a 3D animated suitcase model using WOW Model Viewer.
2. Implement scroll-triggered animation so that when users scroll on the landing page, the suitcase animates and moves toward the product detail section.
3. Ensure the suitcase’s color changes dynamically to match the color of buttons present on the page.
4. Include the additional standard pages:
– Produk (listing other products if needed)
– About Us
– Contact Us
with appropriate content placeholders.
**# Output Format**
Provide the complete HTML, CSS, and JavaScript code (or framework-based code if relevant) that implements the above website structure and functionality. Include comments explaining:
– How the 3D model viewer is integrated
– How the animations and color adaptations work
**# Notes**
– The suitcase animation and color adaptation should be smooth and visually appealing.
– Use placeholder text or images for the About Us and Contact Us pages if content is not specified.
– Assume availability of the WOW Model Viewer 3D library for embedding the suitcase model.
Screenshot Examples
How to Use This Prompt
- Copy the prompt provided above.
- Paste it into your preferred coding environment.
- Follow the steps to design the homepage.
- Implement the scroll-triggered animation for the suitcase.
- Ensure the suitcase color adapts to button colors.
- Include standard pages with placeholder content.
Tips for Best Results
- 3D Model Integration: Use WOW Model Viewer to embed the suitcase model on the homepage for an interactive experience.
- Scroll Animation: Implement a scroll event listener to animate the suitcase’s movement towards the product section as users scroll down.
- Dynamic Color Change: Utilize JavaScript to detect button colors and update the suitcase’s color accordingly for a cohesive design.
- Standard Pages: Create separate HTML pages for Produk, About Us, and Contact Us with relevant placeholders for content.
FAQ
- What is a WOW 3D animated Model Viewer?
It is a tool for displaying 3D models interactively on websites, enhancing user experience. - How can I animate a suitcase on scroll?
Use JavaScript to detect scroll events and apply CSS animations to move the suitcase. - How do I change the suitcase color dynamically?
Use JavaScript to match the suitcase's color with the button's color on the page. - What pages should my website include?
Include Home, Produk, About Us, and Contact Us pages with relevant content.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
