AbyssVeil

🎃 Inspiration

AbyssVeil was inspired by the Solo Leveling system - a world where characters awaken hidden powers through mysterious “System Messages.” I wanted to reimagine that feeling of awakening but with a Halloween twist — eerie, mysterious, and empowering.

The idea came from thinking:

What if your shadow held your true identity?

That spark led me to create an interactive website that “unveils” your inner alter ego — a dark RPG persona born from the digital abyss.

What it does

AbyssVeil is a web experience that merges storytelling, design, and interactivity. It begins with a simple question — your name — and transforms it into an identity drawn from the Abyss, a procedurally themed world filled with RPG-style “shadow classes.”

When you click “Unveil My Shadow”, an animation sequence plays, connecting you to the Abyss Network. You’re then greeted by an immersive UI that declares:

“Abyss Connected.” [Your Name] - Shadow Classes Profile

How I built it

Frontend: Built using Next.js + ThreeJS + TypeScript for fast, smooth transitions and modular structure.

Styling: Leveraged Tailwind CSS for rapid UI prototyping and dark, ethereal aesthetics.

Animation: Used Framer Motion for fluid, cinematic transitions that make the shadow unveiling feel alive.

Data System: Each “Shadow Class” (like Nether Architect) is defined in a structured JSON schema.

Challenges we ran into.

One of the trickiest parts of AbyssVeil was making sure that each user always received the same “Shadow Class” every time they entered their name, no matter when or where they tried it.

I didn’t want the experience to feel like pure randomness neither wanted to use Redis or DB It needed to feel personal, as if the “Abyss” itself remembered you. so I used deterministic hash function

Styling animations for threejs and memory issues.

Accomplishments that we're proud of

• Built and designed AbyssVeil within a few days — from idea to functional website.
• Created a dynamic identity system that generates consistent "Shadow Classes" for each user using a custom hash algorithm.
• Managed to blend aesthetic design, animation, and sound into a unified and immersive experience.

What we learned

• How to turn a creative concept (like a Solo Leveling–inspired world) into an interactive web experience.
• Using deterministic logic (hash mapping) to make gameplay feel personal and consistent.

What's next for AbyssVeil

• Expanding the class system with more dynamic traits, visuals, and lore for each shadow identity.
• Maybe turning it into fully RPG based card game.

Built With

• nextjs
• react
• three.js
• typescript