Forem: AmyXandra

How I Used Kiro to Turn a Simple Three.js Scene into a Playable Game World

AmyXandra — Fri, 05 Dec 2025 19:40:45 +0000

What started as a simple haunted house scene in a Three.js tutorial became my most ambitious hackathon project yet. Armed with React Three Fiber and Kiro (an AI-powered dev tool), I spent one week transforming static 3D scenery into Haunted House Party — a fully interactive Halloween game where the doors lead to unpredictable mini-games.

This is the story of how I built it, what went wrong, and what I learned about shipping 3D web experiences fast.

From Classroom to Game World

Earlier this year, I built a basic haunted house scene in a Three.js course. Nothing fancy, just a house surrounded by graves. When Kiro asked us to build a spooky app for Kiroween, that scene came first to mind, and I asked myself:

"What if the house wasn't just scenery? What if the door hid a mystery like in Halloween movies?"

That question became Haunted House Party, a Halloween-themed world where the door teleports you into a random mini-game. To modernize the workflow and gain component flexibility, I rebuilt everything from scratch in React Three Fiber.

The Core Mechanic

The gameplay loop is simple:

Knock three times on any door in the foggy graveyard
Get transported into a random 3D mini-game inside a dark room
Fail? Retry or get kicked back to the hub world

Mini-games include:

Slicing flying pumpkins mid-air
Sprinting through endless tomb tunnels

The Build Process

1. Migrating to React Three Fiber with Kiro
Kiro accelerated my migration from vanilla Three.js to React Three Fiber. Instead of manually rewriting geometry and materials, I wrote steering documents upfront to establish:

The atmospheric vibe and tone
Core game mechanics
Lighting and fog parameters
Design rules for future rooms

This gave the AI clear context for generating better code suggestions.

2. Rapid Prototyping with AI-Assisted Development
React Three Fiber doesn't include Three.js's built-in GUI helpers, which can slow down iteration. I used Kiro's vibe chat for:

Previewing animations before implementing them
Testing asset placement and scaling
Troubleshooting material and shader issues
Getting real-time optimization suggestions

This conversational debugging style saved hours of trial and error.

3. Building Structured Mini-Game Specs
Before writing any game logic, I created detailed specs for each mini-game:

Objective: What's the win condition?
Player controls: Keyboard? Mouse? Both?
Asset list: Models, textures, sounds needed
Win/fail conditions: Clear success/failure states
Expected animations: Entry, gameplay, exit These specs dramatically improved the quality of AI-generated code and reduced back-and-forth iterations.

4. Automated Repository Cleanup
As I experimented with different assets and approaches, my repo became cluttered. I created Kiro agent hooks that automatically:

Deleted unused files after each iteration
Removed outdated test assets
Kept the codebase lean and navigable

This automation was crucial for maintaining velocity during the hackathon crunch.

5. Performance Optimization (The Never-Ending Battle)
Every iteration included aggressive optimization:

Simplifying shaders to reduce GPU load
Baking lights instead of real-time shadows
Compressing textures with minimal quality loss
Replacing heavy models with sub-8MB alternatives

Challenges That Nearly Broke Me (and My Laptop)

Performance Bottlenecks
3D assets get heavy fast. My laptop froze multiple times before I finally replaced most of the assets with much lighter versions. The loading screen became a necessity, not a feature.

Lesson learned: Start with performance budgets. Know your target framerates and file size limits before importing that beautiful 50MB haunted tree model.

Slow Iteration Cycles
Writing comprehensive specs meant Kiro sometimes processed 15-17 tasks before I could test anything. This cost me a lot of hours wh

Lesson learned: Balance spec detail with iteration speed. It's faster to create only the important tasks for the specs and skip the tests initially.

Asset Hunting
Finding good quality, lightweight, Halloween-themed 3D assets was harder than expected. Many free models were:

Too polygon-heavy
Poorly rigged
Missing textures
Over 10MB

Lesson learned: Budget time for asset sourcing. Consider creating simple custom models instead of hunting for the "perfect" free asset.

Wins I'm Proud Of

Despite the struggles, I shipped several features I'm genuinely excited about:

A perfect eerie loading animation that sets the mood immediately
Fully functional mini-games with distinct mechanics
Strong visual identity for each room (fog, lighting, materials all cohesive)
Smooth gameplay after aggressive optimization
The zoom-into-the-door transition — this took many revisions but nails the vibe

Key Takeaways

Ship Fast, Fix Fast
When one approach failed, I pivoted immediately instead of trying to salvage it. This mentality kept momentum alive during the hackathon.

**React Three Fiber is Powerful (and Different)
I leveled up massively in R3F and learned how scene management differs from vanilla Three.js. The component model is brilliant once you embrace it.

AI Accelerates Development When Used Intentionally
Kiro wasn't magic — it was most effective when I gave it:

Clear context through steering documents
Structured specs for complex features
Specific debugging questions instead of vague prompts

3D Game Development is a Skill Stack
I now understand the full pipeline: modeling, texturing, animation, optimization, gameplay programming, and performance profiling. Each piece matters.

Resources

React Three Fiber Documentation
Three.js Journey Course (where the original scene came from)
Kiro AI Dev Tool (hackathon sponsor)

Study Group Connector: Automating Learning Community Discovery with Runner H

AmyXandra — Mon, 07 Jul 2025 00:14:38 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

Study Group Connector uses Runner H and Surfer H to scrape public LinkedIn groups, Reddit subreddits, and Discord servers for active study groups and free bootcamps (keywords: “free bootcamp,” “study group,” “coding”). It compiles 10–20 communities into a Google Sheet and emails the results, saving students hours searching for peer support.

Demo

https://youtu.be/xuEP3tpZ0Wo

How I Used Runner H

I leveraged Runner H’s Surfer H web-scraping capabilities and Google Sheets/Gmail integrations to automate community discovery. Here’s how to replicate it:

Access Runner H: Sign up at https://runner.hcompany.ai/ using your Google account.
Input the Prompt: Create a new run in Runner H and paste the following prompt:

1. **Initialize Parameters**:
   - Use the predefined email: “[your-email]” (replace with your actual Gmail address and authenticate in H-Studio before running).
   - Search for communities offering free bootcamps or study groups using keywords: “free bootcamp,” “study group,” “coding bootcamp,” “learning community.”
   - Target platforms: LinkedIn groups, Reddit subreddits, Discord servers.
2. **Scrape LinkedIn Groups**:
   - Navigate to https://www.linkedin.com/search/results/groups/?keywords=free%20bootcamp%20study%20group.
   - Extract up to 10 groups, including: group name, platform (“LinkedIn”), description (first 50 words), join link (URL to group page).
   - Filter for public groups with keywords “free bootcamp,” “study group,” or “coding” in name or description, and active status (e.g., member count >100 or recent posts).
3. **Scrape Reddit Subreddits**:
   - Navigate to https://www.reddit.com/r/learnprogramming, https://www.reddit.com/r/coding, and https://www.reddit.com/r/learnpython.
   - Extract up to 10 posts or subreddit descriptions mentioning “free bootcamp” or “study group,” including: subreddit name (e.g., r/learnprogramming), platform (“Reddit”), description (first 50 words), join link (subreddit or post URL).
   - Use public RSS feeds (e.g., https://www.reddit.com/r/learnprogramming/.rss) if direct scraping fails.
   - Filter for posts or subreddits with recent activity (e.g., posted within 30 days).
4. **Scrape Discord Servers**:
   - Navigate to https://disboard.org/servers/tag/study or https://discord.me/servers.
   - Search for “coding,” “bootcamp,” or “study group.”
   - Extract up to 10 servers, including: server name, platform (“Discord”), description (first 50 words), join link (invite URL).
   - Filter for public servers with keywords “free bootcamp” or “study group” and active status (e.g., member count >50).
5. **Filter Relevant Communities**:
   - Keep communities with:
     - Keywords “free bootcamp,” “study group,” “coding bootcamp,” or “learning community” in name or description.
     - Active status (e.g., recent posts within 30 days, member count >50 for Discord/LinkedIn).
   - Remove duplicates (same group name and platform).
   - Aim for 10-20 total communities across platforms.
6. **Store Results in Google Sheet**:
   - Create a Google Sheet titled “Study Group Communities” with columns: Group Name, Platform, Description, Join Link.
   - Populate with filtered communities, ensuring no duplicates.
7. **Email Results**:
   - Send an email via Gmail to [your-email] with the subject: “Free Bootcamp and Study Group Communities”.
   - Email content: “Hi [Your Name], Found [number] communities offering free bootcamps or study groups. View details: [Google Sheet link]. Regards, Study Group Connector”
   - Include the Google Sheet link.
8. **Error Handling**:
   - If fewer than 5 communities are found, email [your-email]: “Warning: Insufficient communities found. Try again later or check search terms.”
   - If scraping fails for any platform, retry 3 times. If still failing, skip to the next platform or use fallback URLs: https://www.linkedin.com/search/results/content/?keywords=study%20group, https://www.reddit.com/search/?q=free%20bootcamp, https://disboard.org/servers.
   - If Google Sheet creation fails, output community data as a text summary in H-Studio with columns: Group Name, Platform, Description, Join Link.
   - Log errors in H-Studio (e.g., “Error: Unable to scrape [platform] for communities”).

Run the Workflow: Hit “Run” in Runner H. The agent will scrape LinkedIn, Reddit, and Discord, filter communities, populate the Google Sheet, and send an email.
Check Outputs: Verify the Google Sheet (“Study Group Communities”) in your Google Drive and the email in your Gmail inbox. Check for error logs or fallback text output if issues occur.

Use Case & Impact

Study Group Connector helps students and learners find active study groups and free bootcamps on LinkedIn, Reddit, and Discord, saving 1–2 hours weekly. It fosters peer collaboration for coders, data scientists, and educators, streamlining community discovery and enhancing engagement in learning ecosystems.

Don't miss events near you: Automated Tech Events Data Collection with Runner H

AmyXandra — Sun, 06 Jul 2025 20:05:50 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

Tech Event Finder uses Runner H and Surfer H to scrape tech events (keywords: “tech,” “developer,” “hackathon,” “coding”) from Eventbrite and Meetup for July 6–September 31, 2025. It organizes up to 40 events into a Google Sheet and emails a summary, saving time for tech enthusiasts and organizers.

Demo

https://youtu.be/XkfkD0Eoi7M

How I Used Runner H

I leveraged Runner H’s Surfer H web-scraping capabilities and integration with Google Sheets and Gmail to build an end-to-end automation workflow. Here’s how to replicate it:

Access Runner H: Sign up at https://runner.hcompany.ai/ using your Google account.
Input the Prompt: Create a new run in Runner H and paste the following prompt:

1. **Initialize Parameters**:
   - Use my email for notifications.
   - Search for tech events with keywords: “tech,” “developer,” “hackathon,” “coding”.
   - Filter for events from July 6, 2025, to September 31, 2025.
2. **Scrape Eventbrite Events**:
   - Navigate to https://www.eventbrite.com/directory.
   - Search for “tech” or “hackathon” events.
   - Extract up to 20 events, including: event title, date, location (or “Online”), description, URL.
   - Store results in a Google Sheet titled ‘Tech Events’.
3. **Scrape Meetup Events**:
   - Navigate to https://www.meetup.com/find.
   - Search for “tech” or “developer” events.
   - Extract up to 20 events, including: event title, date, location (or “Online”), description, URL.
   - Append to the ‘Tech Events’ Google Sheet.
4. **Filter Relevant Events**:
   - Keep events occurring between July 6, 2025, and September 31, 2025.
   - Include only tech-related events (keywords: “tech,” “developer,” “hackathon,” “coding” in title or description).
   - Remove duplicates (same title and date).
5. **Store Results in Google Sheet**:
   - Create a Google Sheet titled ‘Tech Events’ with columns: Event Title, Date, Location, Description, URL.
   - Populate with filtered events, ensuring no duplicates.
6. **Email Results**:
   - Send an email via Gmail to my email with the subject: “Upcoming Tech Events”.
   - Email content: “Hi [My Name], Found [number] tech events for July–September 2025. View details: [Google Sheet link]. Regards, Tech Event Finder”
   - Attach or include the Google Sheet link.
7. **Error Handling**:
   - If fewer than 5 events are found, email: “Warning: Insufficient tech events found. Try again later or check search terms.”
   - If scraping fails, retry 3 times. If still failing, use fallback URLs: https://www.eventbrite.com/explore or https://www.meetup.com/explore.
   - If Google Sheet creation fails, output event data as a text summary in H-Studio with columns: Event Title, Date, Location, Description, URL.
   - Output errors in H-Studio (e.g., “Error: Unable to scrape events from [site]”).

Run the Workflow: Hit “Run” in Runner H. The agent will scrape Eventbrite and Meetup, filter events, populate the Google Sheet, and send an email.
Check Outputs: Verify the Google Sheet (‘Tech Events’) in your Google Drive and the email in your Gmail inbox. If errors occur, check H-Studio for logs or fallback text output.

Use Case & Impact

Tech Event Finder helps developers, tech enthusiasts, and organizers by automating event discovery from Eventbrite and Meetup. It saves hours of manual searching, delivering a curated, deduplicated list of events in a Google Sheet. Developers find hackathons, organizers optimize scheduling, and community managers share event lists, streamlining planning and networking.