Advanced Interactive Design / Final Thematic Website
25/6/2026 - 31/7/2026 (Week 10 - Week 15)
Chang Wing / 0367807
Advanced Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University
Final Thematic Website
TABLE OF CONTENTS
1. Instructions
INSTRUCTIONS
PROCESS DOCUMENTATION
Backup Changes at GitHub
I also prompted:
enforce GitHub security best practices, prevent exposing API keys, avoid committing sensitive files, check .gitignore
in Antigravity so it would follow these security practices whenever it generated, modified, or prepared code for Git commits and GitHub uploads.
Backup Changes at GitHub
I set up a GitHub repository to backup my website and keep track of different versions of the code. Since I used Antigravity as an AI coding assistant, the generated changes after each prompt could sometimes introduce errors / affect existing code. GitHub allows me to review previous versions and restore earlier codes if errors emerge after Antigravity made changes to the codes.
Figure 1.1 Setup GitHub Repository
enforce GitHub security best practices, prevent exposing API keys, avoid committing sensitive files, check .gitignore
in Antigravity so it would follow these security practices whenever it generated, modified, or prepared code for Git commits and GitHub uploads.
Coding with Google Antigravity
I subscribed to the RM97.99/month Google AI Pro plan as the free usage limit was not sufficient for my development needs and used Google Antigravity as an AI coding assistant to support my website development process.
Figure 1.2 My Google Antigravity workspace
Since I was new to setting up a website, whenever I encountered something confusing, I tried to understand the logic behind it to build a better understanding of how things work, this make easier to prevent issues and troubleshoot later on because if AI doesn't know what to fix, I can fix manually. Few examples of questions asked shown in Figure 1.3 & 1.4.
Figure 1.3 Asking for clarification
Figure 1.4 Asking for clarification
To save tokens and avoid hitting the usage limit before it refreshes, I asked Gemini to generate markdown files whenever necessary for Antigravity. This helps me provide clearer instructions to Antigravity while reducing the number of prompts needed during the coding process.
Figure 1.5 Google Gemini generated Markdowns for Google Antigravity
Figure 1.6 Correcting Markdown prompts generaeted by Google Gemini
Splash Screen
The code generated by AI was not always perfect, possibly due to limitations in my prompts or the AI's interpretation. I had to manually adjust the CSS styles to better align the UI with my Figma prototype and refine the animations. Figure 1.7 & 1.8 below show the splash screen before and after the manual CSS adjustments:
Figure 1.7 Splash screen before the manual CSS adjustments
Figure 1.8 Splash screen after the manual CSS adjustments
Figure 1.9 Screenshot of CSS adjustments process
Figure 1.10 Screenshot of CSS adjustments process
Food (Home Page)
To ksfknj
Figure 1.10 Renaming SVG files
Markdown prompt pasted into Google Antigravity:
📌 Task Overview
Implement the transition logic from the Splash Screen to the Home Screen Map Interface upon clicking "- Click to Start -". Build the Home Screen UI, interactive map route, horizontally scrollable state highlight card carousel for all 14 Malaysian states/territories, and entrance transitions.
CRITICAL CARD COMPOSITION DIRECTIVE:
Each `.state-card` is a relative container holding 3 OVERLAPPING SVGs (`food.svg`, `signboard.svg`, `landmark.svg`) stacked using absolute positioning to form a single cohesive visual unit:
1. Base Layer (`food.svg`): Circular food plate placed on the left (`position: relative` or `absolute; left: 0; bottom: 0; z-index: 1`).
2. Middle Layer (`landmark.svg`): Landmark badge positioned at the bottom-right (`position: absolute; right: 0; bottom: 10px; z-index: 2`).
3. Top Layer (`signboard.svg`): Blue state signboard badge positioned at the top-right (`position: absolute; right: 15px; top: 0; z-index: 3`).
Target Path: /Users/torpedo/Downloads/AdvancedInteractiveFinalWebsite
Canvas Size: Fixed 1440px × 800px (16:9 Aspect Ratio)
Font Setup:
- Primary UI & Nav Font: 'Lilita One' (Regular, 32px, #FFFFFF) for Navbar Links & Title
- Body & Auxiliary UI: 'Sniglet' (Regular, #FFFFFF)
Global Timing Function: ease-in-out for all entry, exit, slide transitions, and idle loops.
==========================================================================
📁 ASSET FILE NAMING CONVENTION & DIMENSIONS (public/assets/)
==========================================================================
All vector illustrations are located in `public/assets/` following this schema:
1. State Highlight Card Assets (14 sets total):
- Food Illustration (`[statename]-food.svg`): width: ~328px; height: ~335px;
- State Signboard (`[statename]-signboard.svg`): width: ~172px; height: ~143.5px;
- State Landmark (`[statename]-landmark.svg`): width: ~151px; height: ~137px;
Exact State Slugs:
`perlis`, `kedah`, `penang`, `perak`, `selangor`, `kuala-lumpur`, `negeri-sembilan`, `melaka`, `johor`, `pahang`, `terengganu`, `kelantan`, `sabah`, `sarawak`
2. Map & Pin Assets:
- Blue Route Line: `public/assets/map-route.svg`
- Active Red Location Symbol: `public/assets/map-location-symbol.svg`
==========================================================================
⚠️ CRITICAL UI PROTECTION DIRECTIVE (DO NOT OVERRIDE CSS)
==========================================================================
- DO NOT ALTER OR DELETE any existing CSS UI rules, color variables (`:root`), border styling, or container dimensions from `style.css`.
- Preserve existing border colors, button styling, toggle switch styles, and card container definitions exactly as configured.
- Only ADD new classes or append missing keyframes needed for the Home Screen Map Interface without mutating established base styling.
==========================================================================
1. TRANSITION SEQUENCE (Splash Screen -> Home Screen)
==========================================================================
When the user clicks the `.start-button-ui` ("- Click to Start -"):
1. Splash Screen Exit (Reverse Entrance Animations):
- Reverse entrance animations over 1.2s (`ease-in-out`) to clear splash screen assets:
* Logo: Slides back UP
* Top Cloud: Slides back LEFT
* Right Cloud: Slides back RIGHT
* Left Cloud: Slides back LEFT
* Nasi Lemak Plate: Slides back OUT to the left edge
* Hibiscus Flower: Slides back OUT to the right edge
* Flag: Slides back OUT to the right edge
- Keep warm amber background (`#F6A51E`) intact throughout transition.
2. Full-Screen Transition Rider Animation:
- Mount/Animate `.transition-scooter-container` holding `public/assets/transition-scooter.gif`:
* Container Dimensions: `width: 831px; height: 584px;`
* Motion Path: Drives across canvas from far left off-screen (`translateX(-900px)`) to far right off-screen (`translateX(1500px)`) over 1.2s (`ease-in-out`).
* Behavior: Hidden (`display: none`) immediately once out of frame.
3. Home Screen Entrance:
- Mount/Show Home Screen container (`#home-screen`) as transition scooter exits.
- Top Navigation Bar (`.home-nav`): Slides down from `top: -80px` to `top: 0px` over 0.6s (`ease-in-out`).
- Route Path & Carousel: Slides in from the right (`translateX(100%)` to `translateX(0)`) over 0.8s (`ease-in-out`).
- Small Route Scooter (`.route-scooter-container` holding `public/assets/route-scooter.gif`):
* Container Dimensions: `width: 202px; height: 142px;`
* Entrance: Drives in from `translateX(-300px)` to `translateX(120px)` over 1.0s (`ease-in-out`), settling statically on top of the starting state (Perlis).
==========================================================================
2. HOME SCREEN LAYOUT STRUCTURE & STACKING HIERARCHY
==========================================================================
A. Fixed Top Navigation Bar (.home-nav)
- Height: 80px | Width: 100% | Background: Transparent
- Left: Logo asset (`public/assets/nav-logo.svg` or placeholder) + Text: "Malaysian Food Adventure" (Font: 'Lilita One', 32px, #FFFFFF).
- Center Navigation Links: Horizontal list (`Food` | `About` | `Story` | `Guide`).
* Style: Font: 'Lilita One', 32px, White `#FFFFFF`.
* Hover: Subtle text glow / scale up (`transform: scale(1.05)` with `ease-in-out`).
- Right Utility:
* Music Control: "Music On" label + Pill Switch
* Music Note Icon Placeholder (`<div class="music-icon-placeholder"></div>`).
B. Main Horizontal Food Route / Route Map (.map-route-container)
[Z-INDEX STACKING HIERARCHY]:
- Layer 1 (z-index: 1 - Background Route Path):
* SVG Image: `<img src="public/assets/map-route.svg" class="map-route-svg" />`
* MUST sit visually BEHIND the food card carousel (`z-index: 1`).
- Layer 2 (z-index: 2 - Active Location Pin):
* SVG Image: `<img src="public/assets/map-location-symbol.svg" class="map-pin-svg" />`
* Position: Dynamically translates along coordinate nodes (14 waypoint nodes) on `map-route.svg` when a state card is selected or scrolled into view.
- Layer 3 (z-index: 3 - Small Route Scooter - `.route-scooter-container`):
* Dimensions: `width: 202px; height: 142px;`
* Holds `public/assets/route-scooter.gif` at active state location.
* NO CSS IDLE VIBRATION: Do NOT apply any `@keyframes` vertical oscillation (`translateY`) to this container.
- Layer 4 (z-index: 10 - State Cards Horizontally Scrollable Carousel):
* Flex container with horizontal scrolling enabled (`overflow-x: auto`, `scroll-snap-type: x mandatory`).
* Only 2 to 3 state cards are rendered in visible viewport at a time.
* OVERLAPPING COMPOSITION CSS FOR `.state-card`:
```css
.state-card {
position: relative;
width: 420px;
height: 380px;
flex-shrink: 0;
scroll-snap-align: center;
}
/* Base Layer - Food Plate */
.card-food-svg-container {
position: absolute;
left: 0;
bottom: 0;
width: 328px;
height: 335px;
z-index: 1;
}
/* Middle Layer - Landmark Badge */
.card-landmark-svg-container {
position: absolute;
right: 10px;
bottom: 20px;
width: 151px;
height: 137px;
z-index: 2;
}
/* Top Layer - State Signboard */
.card-signboard-svg-container {
position: absolute;
right: 30px;
top: 10px;
width: 172px;
height: 143.5px;
z-index: 3;
}
.card-food-svg-container img,
.card-landmark-svg-container img,
.card-signboard-svg-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
```
* Card HTML Template:
```html
<div class="state-card" data-index="0" data-state="perlis" data-pin-x="180" data-pin-y="340">
<div class="card-food-svg-container">
<img src="public/assets/perlis-food.svg" alt="Perlis Food" />
</div>
<div class="card-landmark-svg-container">
<img src="public/assets/perlis-landmark.svg" alt="Perlis Landmark" />
</div>
<div class="card-signboard-svg-container">
<img src="public/assets/perlis-signboard.svg" alt="Perlis Signboard" />
</div>
</div>
```
* Complete List of 14 Cards:
1. Perlis (`perlis-food.svg`, `perlis-landmark.svg`, `perlis-signboard.svg`)
2. Kedah (`kedah-food.svg`, `kedah-landmark.svg`, `kedah-signboard.svg`)
3. Penang (`penang-food.svg`, `penang-landmark.svg`, `penang-signboard.svg`)
4. Perak (`perak-food.svg`, `perak-landmark.svg`, `perak-signboard.svg`)
5. Selangor (`selangor-food.svg`, `selangor-landmark.svg`, `selangor-signboard.svg`)
6. Kuala Lumpur (`kuala-lumpur-food.svg`, `kuala-lumpur-landmark.svg`, `kuala-lumpur-signboard.svg`)
7. Negeri Sembilan (`negeri-sembilan-food.svg`, `negeri-sembilan-landmark.svg`, `negeri-sembilan-signboard.svg`)
8. Melaka (`melaka-food.svg`, `melaka-landmark.svg`, `melaka-signboard.svg`)
9. Johor (`johor-food.svg`, `johor-landmark.svg`, `johor-signboard.svg`)
10. Pahang (`pahang-food.svg`, `pahang-landmark.svg`, `pahang-signboard.svg`)
11. Terengganu (`terengganu-food.svg`, `terengganu-landmark.svg`, `terengganu-signboard.svg`)
12. Kelantan (`kelantan-food.svg`, `kelantan-landmark.svg`, `kelantan-signboard.svg`)
13. Sabah (`sabah-food.svg`, `sabah-landmark.svg`, `sabah-signboard.svg`)
14. Sarawak (`sarawak-food.svg`, `sarawak-landmark.svg`, `sarawak-signboard.svg`)
C. Bottom Pagination Bar (.bottom-pagination)
- Position: Absolute, bottom 40px, horizontally centered (`left: 50%`, `transform: translateX(-50%)`).
- Content: Row of 14 circular pagination dots (`width: 12px`, `height: 12px`, white with 50% opacity).
- Active Indicator: Active dot expands into rounded capsule/pill shape (`width: 32px`, `opacity: 1`, `#FFFFFF`, `transition: all 0.3s ease-in-out`).
==========================================================================
3. IDLE & INTERACTION ANIMATIONS (script.js & style.css)
==========================================================================
1. Route Scooter State: Static CSS coordinates after drive-in sequence completes.
2. Food Plate Cards Floating: Gentle breathing float for circular state cards (`translateY(-6px)` to `0px` every 4s `ease-in-out`). Apply float to `.state-card` wrapper so all 3 composite SVGs move together seamlessly.
3. Card Hover Effect: Hovering over any `.state-card` scales the entire composite unit up smoothly to 108% (`transform: scale(1.08)`) over 0.3s using `ease-in-out`.
4. Interactive State Selection, Horizontal Scrolling & Map Pin Movement:
- On Scroll / Drag / Dot Click:
* Determine active state centered in view.
* Update bottom pagination dots (activate corresponding 1 of 14).
* Animate Red Pin (`public/assets/map-location-symbol.svg`): Translate smoothly to target node coordinate on blue route over `0.4s ease-in-out`.
* Apply subtle arrival bounce (`scale(1.2)` to `scale(1.0)`).
==========================================================================
4. CODE & ARCHITECTURE REQUIREMENTS
==========================================================================
- Google Fonts Import: Guarantee `@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Sniglet:wght@400;800&display=swap');` is present in `style.css`.
- Timing Function Standard: Apply `ease-in-out` across all CSS transitions and animations.
- Relative Overlapping Sizing: Enforce `.state-card` relative positioning with z-indexed child wrappers (`z-index: 1` food, `z-index: 2` landmark, `z-index: 3` signboard) to replicate exact overlapping design.
- Scrollable Carousel CSS: Set `.state-card-carousel` to `display: flex; overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory;` with hidden scrollbars.
- Two-Scooter Container Classes: Ensure `.transition-scooter-container` (831px × 584px) and `.route-scooter-container` (202px × 142px) are defined separately.
NOTE: I noticed that after submitting a new prompt, Antigravity would sometimes overwrite the manual CSS refinements I had already made by reverting parts of the code to an earlier generated version. To prevent this, I explicitly informed the AI about my manual changes and instructed it to inspect the latest style.css before making further modifications. This helped preserve my existing work while allowing Antigravity to build on the most up-to-date version of the project.
Example prompt:
"I have manually updated
style.cssin VS Code with the latest:rootvariables and custom UI styles. Please inspect/read the existingstyle.cssfirst and preserve these manual changes. Only modify the parts related to my current request."
and MAKE SURE pushed commit to GitHub.
The figure below shows the first homepage generated using the Markdown prompt. Although it followed the overall requirements, the composition and layout were not as intended. I had to refine the prompt and manually adjust the generated code to align the UI with my Figma prototype.
Figure 1.11 First homepage generated using the Markdown prompt, very weird composition
Figure 1.11 Coding Process
Figure 1.11 Figma Version
Figure 1.11 First hamburger menu generated using Markdown prompt, weird looking
UX Consideration:
-The currently playing song will automatically scroll into view when the hamburger menu is opened, ensuring it is always visible to the user
Pagination Bar (Food Page)
The bottom pagination bar was designed with several UX-friendly micro-interactions to create a ease navigation experience across all 14 Malaysian states. The active pagination indicator expands from a 12px circle into a 32px pill to provide clear visual feedback of the user's current position.
To prevent jittery transitions when users quickly move their cursor across multiple pagination dots, a 130ms hover debounce was implemented in JavaScript so that state transitions only occur when the cursor intentionally pauses over a target. When a pagination dot is hovered for 130ms or clicked, multiple interface elements are synchronised simultaneously:
- The carousel scrolls to the selected state card,
- The map location pin moves to the corresponding destination with a bounce animation
- The route scooter travels to the selected location and automatically flips direction based on its movement
- The active pagination indicator updates accordingly
Figure 1.11 Pagination bar in Food Page
Randomised BGM
Prompt:
Configure the background music (BGM) system logic so that:
1. First-Ever Visit (New Device/Laptop): Plays the designated default track (`terukir-bintang.mp3`) on initial site load.
2. Subsequent Visits (Same Laptop/Browser): Randomly selects and plays 1 song from the 12-track playlist every time the user opens or reloads the website from then on.
FINAL THEMATIC WEBSITE
FEEDBACK
Final Thematic Website
Week 11 (02/07/2026)
Feedback: They look great! All good please proceed.
REFLECTION
Thgbskjs
Comments
Post a Comment