14 - Entrance Experience, Sign-Up Flow & Security

Design vision, implementation specs, and strategic options for Wavic's first-touch user experience

---

Table of Contents

1. Philosophy — "Enter Music Heaven"
2. Current State Audit
3. Five Entrance Animation Options
4. Sign-Up Flow Redesign
5. Username Strategy
6. User Profiles & Role Flexibility
7. Sample Data & Instant Value
8. Validation & Security Hardening
9. Test User Convention
10. Implementation Roadmap

---

1. Philosophy

The Core Concept: Portal to a Music World

Wavic isn't a generic SaaS tool — it's a creative sanctuary. The logo (white stairs ascending to a white CD) is a visual metaphor: climbing toward your finished record. Every transition should feel like crossing a threshold into a purpose-built universe.

Design Principles for Entrance

Principle	Meaning	Implementation
Threshold	The user crosses from the ordinary web into a music world	A full-screen cinematic transition separates sign-up from the platform
Anticipation	Build excitement before revealing the workspace	Progressive reveal — logo first, then context, then tools
Earned Entry	Each step feels like unlocking something	Micro-rewards: the CD spinning after username, vinyl texture appearing after photo
Sensory Coherence	Visual + auditory + motion tell one story	Coordinated animations with optional subtle audio cues
Speed	Never sacrifice perceived speed for spectacle	Animations are interruptible, load real data in the background

Connection to Platform Vision

From PLATFORM-VISION.md Design Principle #5 — "Progressive Disclosure: Simple by default, powerful when needed." The entrance experience IS the first progressive disclosure: show enough to feel magical, defer complexity to when the user needs it.

---

2. Current State Audit

Sign-Up Page (/auth/sign-up)

• Fields: Name (fullName), Email, Password
• Google OAuth: Available via signIn('google')
• Post sign-up: Auto-signs in → redirects to /onboarding
• Visual: AuthWrapperOne with GridPattern background, auth_portada.png banner
• Copy: "A music heaven for your work in progress productions"

Sign-In Page (/auth/sign-in)

• Fields: Email, Password, Remember Me
• Google OAuth: Available
• Missing: No "Forgot password" endpoint (link exists, not functional)

Onboarding (/onboarding)

• Step 1: Username input (manual text entry)
• Step 2: Profile photo upload (drag-and-drop)
• Step 3: Audio upload (redirects to wave page)
• Entrance animation: CD with stairs scales from 3→1 with blur, 2.3s delay
• Issue: Animation delay feels disconnected — there's a 2.3s blank stare before anything happens

Backend Registration (POST /user/register)

• No DTO validation — individual @Body() params bypass class-validator
• No email verification — user is instantly active
• Global rate limit: 100 req/60s (shared across all endpoints)
• Password hashing: bcrypt with cost factor 12

Identified Gaps

Gap	Severity	Notes
No RegisterDto (zero server-side validation)	🔴 Critical	Any string accepted for email/password
No per-route throttle for auth endpoints	🔴 Critical	Brute-force vulnerable
No email verification flow	🟡 Medium	Users can register with fake emails
No entrance animation between sign-up → onboarding	🟡 Medium	Abrupt page transition
Username requires manual input + availability check	🟡 Medium	Friction point
No role selection (everyone = artist by default)	🟢 Low	Limits non-artist users
JWT has no refresh token mechanism	🟡 Medium	7-day single token

---

3. Five Entrance Animation Options

The Wavic Logo Anatomy

   ╱ ╲        ← Vinyl disc / CD
  ╱   ╲
 ╱     ╲
╱_______╲
  │ │ │ │     ← White stairs ascending
  │ │ │ │
  ╵ ╵ ╵ ╵        toward the record

The stairs represent the creative journey — ideation → demo → production → mix → master → release. Each step climbs toward the completed vision (the disc).

---

Option A: "The Ascent" (Recommended — Best Fit for Platform Soul)

Concept: After clicking "Get Started", the stairs from the logo animate as steps the user metaphorically climbs. Each onboarding step aligns with a stair.

Sequence:

1. Sign-up form submits → screen fades to black
2. Phase 1 (0-1.5s): Logo appears centered, glowing softly (pulse animation)
3. Phase 2 (1.5-3s): Stairs in the logo illuminate bottom-to-top, each step lighting up like a progress bar
4. Phase 3 (3-5s): Camera "zooms into" the CD — it enlarges to fill screen, then dissolves into the onboarding background
5. Username prompt fades in below the CD (now at regular size at the top)

Technical Implementation:

// Framer Motion orchestration
const sequence = {
  logo: { opacity: [0, 1], scale: [0.5, 1], filter: ['blur(10px)', 'blur(0)'] },
  stairs: { pathLength: [0, 1] }, // SVG path animation per stair
  zoomIn: { scale: [1, 15], opacity: [1, 0] }, // Logo zooms past camera
  reveal: { opacity: [0, 1], y: [20, 0] }, // Username form slides in
};

Why Best Fit: Directly uses the brand metaphor. Every user experiences the platform's philosophy (ascending toward your finished record) before using a single feature. Memorable, unique, on-brand.

Effort: Medium (2-3 days) — Requires SVG manipulation of the logo for stair-by-stair animation.

---

Option B: "The Record Drop"

Concept: The CD from the logo drops from the top of the screen like a vinyl being placed on a turntable. A subtle rotation starts, and the onboarding content appears as if written on the spinning record's label.

Sequence:

1. Sign-up completes → solid #000 screen
2. Phase 1 (0-1s): CD drops from top with gravity-bounce easing
3. Phase 2 (1-2s): CD starts slow rotation (like a turntable). Stairs appear as emanating light rays from the center
4. Phase 3 (2-3s): "Welcome, [Name]" text appears on the CD's label area
5. CD shrinks to its regular onboarding position, content fades in

Why Interesting: Connects to the physical act of starting music (dropping the needle). Feels tactile and music-industry native.

Effort: Low-Medium (1-2 days) — CSS rotation + Framer Motion drop animation.

---

Option C: "The Waveform Gate"

Concept: An audio waveform draws itself across the screen, forming a "gate" the user passes through. The waveform's shape morphs into the CD outline, connecting the product's core (audio waveforms) with the brand mark.

Sequence:

1. Sign-up completes → screen shows a thin horizontal line (center)
2. Phase 1 (0-2s): The line oscillates, becoming a waveform — amplitude grows, filling the screen like a sound explosion
3. Phase 2 (2-3s): Waveform peaks collapse inward, converging into a circle (the CD shape)
4. Phase 3 (3-4s): Circle solidifies into the full CD+stairs logo, then transitions to onboarding

Why Interesting: Directly visual metaphor for "sound becoming your project." Users who love music would immediately resonate. Ties the product feature (waveform player) to the brand entrance.

Effort: High (3-5 days) — Custom SVG/Canvas waveform animation, morph paths.

---

Option D: "The Studio Lights"

Concept: Minimal, cinematic approach. After sign-up, the screen goes dark, then studio spotlights sweep across — revealing the CD+stairs logo like it's on a stage. Clean, premium, fast.

Sequence:

1. Sign-up completes → fade to black
2. Phase 1 (0-1s): Two diagonal light beams sweep from the edges, crossing at center
3. Phase 2 (1-2s): Where beams cross, the CD+stairs logo appears, lit dramatically
4. Phase 3 (2-2.5s): Logo pulses once (like a kick drum hit), background transitions to onboarding gradient
5. Content fades in quickly — this option prioritizes SPEED

Why Interesting: Fastest of all options (2.5s total). Feels like walking onto a stage — which is what artist users are metaphorically doing. Premium and sharp.

Effort: Low (1 day) — CSS gradients for light beams, Framer Motion for logo entrance.

---

Option E: "The Foggy Reveal" (Ambient/Ethereal)

Concept: A misty/cloudy transition where the CD emerges from fog, like discovering something magical. Aligns with the "heaven" language ("A music heaven for your work in progress productions").

Sequence:

1. Sign-up completes → screen fills with animated particle fog (CSS particles or Canvas)
2. Phase 1 (0-2s): Fog swirls gently, with hints of the logo visible through the mist
3. Phase 2 (2-3.5s): Fog parts (Moses effect), revealing the CD+stairs logo with a soft glow
4. Phase 3 (3.5-4.5s): "Welcome to your creative heaven" text appears below logo
5. Logo settles into onboarding position, fog dissipates to onboarding background

Why Interesting: Directly connects to the "music heaven" copy. Ethereal and emotionally resonant. Creates a sense of discovery rather than utility.

Effort: Medium-High (2-4 days) — Particle system or shader-based fog effect.

---

Comparison Matrix

Aspect	A: Ascent	B: Drop	C: Waveform	D: Studio	E: Fog
Brand alignment	★★★★★	★★★★	★★★★	★★★	★★★★
Speed	5s	3s	4s	2.5s	4.5s
Technical effort	Medium	Low	High	Low	Med-High
Memorability	★★★★★	★★★	★★★★★	★★★	★★★★
Mobile-friendly	★★★★	★★★★★	★★★	★★★★★	★★★
Performance	Good	Excellent	Moderate	Excellent	Moderate
"Heaven" feel	★★★★	★★★	★★★	★★★	★★★★★

Recommendation: Start with Option A ("The Ascent") as the primary concept — it's the most authentic to the brand. Keep Option D ("Studio Lights") as a fallback if A proves too heavy for mobile or takes too long to execute.

---

4. Sign-Up Flow Redesign

Current: 4 Screens (Sign-Up → Username → Photo → Audio)

[Sign-Up Page]     →     [Onboarding Step 1]     →     [Step 2]     →     [Step 3]
Name + Email +           Username input            Photo upload        Audio upload
Password                 + availability check      (skippable)         → wave page
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯           ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯           ⎯⎯⎯⎯⎯⎯⎯⎯          ⎯⎯⎯⎯⎯⎯⎯⎯
High friction            Manual + validation        Low friction       Medium friction

Proposed: Streamlined with Instant Gratification

[Sign-Up Page]                    →     🎬 [Entrance Animation]     →     [Smart Onboarding]
Email only (or Google OAuth)            2-5s cinematic transition          Adaptive 1-3 steps
Password set inline                     Brand portal experience           Username auto-generated
Name optional                                                             Photo/Audio skippable
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯          ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯          ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Minimal friction                        High emotional impact             Progressive enrichment

Detailed New Flow

Step 0 — Sign-Up Page (redesigned):

• Required: Email + Password only
• Optional: Full Name (can be added later)
• Google OAuth: One-click sign-up (inherits name + photo from Google)
• Auto-generate a fun username on the backend (see Section 5)
• Immediately sign in → play entrance animation → onboarding

Step 1 — Entrance Animation (new):

• Full-screen cinematic moment (Option A/B/C/D/E from Section 3)
• During animation: backend creates the onboarding artist space + project + track in parallel
• No user input required — pure visual experience

Step 2 — Profile Setup (simplified):

• Show auto-generated username with "Keep it" or "Change" option
• Photo upload integrated (camera icon next to username, not a separate step)
• Both are skippable with a "Continue" button
• If user came via Google OAuth and has a Google profile photo → auto-use it

Step 3 — First Creation (audio upload):

• "Drop your first track" — same as current UploadAudio component
• NEW: "Or explore with sample tracks" button → loads demo content (see Section 7)
• Skip → lands on home dashboard with sample data pre-loaded

---

5. Username Strategy

Problem

Currently requires manual username entry + real-time availability check. This is:

• A friction point (user must invent something unique)
• A failure point (username taken → frustration)
• Unnecessary for initial experience (they can change it later)

Three Options

Option A: Auto-Generated Fun Names (Recommended)

Like Reddit, Discord, or Spotify:

Format: {adjective}-{musicTerm}-{number}
Examples:
  cosmic-synth-4829
  golden-808-7721
  velvet-bassline-3390
  neon-tremolo-6514
  crystal-reverb-2847

Implementation:

// Backend: user.service.ts — on registration
generateUsername(): string {
  const adjectives = ['cosmic', 'golden', 'velvet', 'neon', 'crystal', 'lunar',
    'electric', 'amber', 'sonic', 'phantom', 'arctic', 'crimson'];
  const musicTerms = ['synth', '808', 'bassline', 'tremolo', 'reverb', 'chord',
    'tempo', 'vinyl', 'groove', 'riff', 'beat', 'echo', 'flanger', 'sustain'];
  const number = Math.floor(1000 + Math.random() * 9000);
  const adj = adjectives[Math.floor(Math.random() * adjectives.length)];
  const term = musicTerms[Math.floor(Math.random() * musicTerms.length)];
  return `${adj}-${term}-${number}`;
}

UX: User sees "Your handle: cosmic-synth-4829" with a refresh icon (🔄) to regenerate and a pencil icon (✏️) to type custom. No manual input required unless they want to customize.

Option B: Email-Derived Username

Extract from email:

• john.doe@gmail.com → john-doe
• If taken, append number: john-doe-42

Pros: Predictable, feels personal. Cons: Exposes email structure, less fun.

Option C: Deferred Username

Skip username entirely at sign-up. User has no handle until they set one in settings.

• Display "Anonymous" or just the full name everywhere
• Prompt to set username later via a banner

Pros: Zero friction. Cons: Profile URLs don't work, @mentions impossible.

Recommendation

Option A with the following UX:

1. Backend auto-generates on registration (generateUsername())
2. Onboarding shows it as "Your Wavic handle" with refresh + edit options
3. Username becomes editable in profile settings (one-time change for free, subsequent changes on Pro plan, maybe)
4. The onboarding artist space uses the username as default name (current behavior preserved)

---

6. User Profiles & Role Flexibility

Problem

Not everyone creating an account is an artist. Current flow forces an "artist" mental model.

Proposed User Archetypes

Archetype	Signs Up To...	Onboarding Focus	Artist Space?
Creator (Artist/Producer)	Upload and manage their music	Audio upload, collaboration setup	Yes — creates their own
Collaborator (Engineer/Designer)	Work on others' projects	Skip audio upload, explore invitations	No — joins existing spaces
Listener (Manager/A&R/Client)	Review, comment, approve	Skip upload, learn commenting	No — accesses shared links
Explorer (Curious visitor)	Try the platform, browse	Sample data, guided tour	Yes — with demo content

Implementation: Don't Ask, Detect

Instead of asking "What role are you?" (which adds friction and users often don't know), detect intent from behavior:

1. On sign-up: Everyone gets the same minimal flow
2. If user was invited (has isCreatedByInvitation: true): Skip artist space creation, show "Your collaborations" first
3. If user uploads audio: They're a Creator — full artist space experience
4. If user skips all creation steps: They're an Explorer — show sample data + "When you're ready to create" prompt
5. Profile settings: Allow explicit role change later (doesn't affect features, only UI tailoring)

No Forced Artist Space

The onboarding artist space + project + track should be created lazily:

• Only create when the user actually uploads audio (Step 3)
• Explorers get sample/demo content instead (see Section 7)
• Invited users see their collaborations immediately

Note: This requires a backend change — currently POST /track/onboarding creates the artist space + project + track eagerly during Step 1 (username save). The creation should be deferred to Step 3 (audio upload) or triggered by "Create your first artist space" manually.

---

7. Sample Data & Instant Value

Problem

After sign-up with all skips, the user lands on an empty dashboard. Empty states kill engagement.

"Wavic Showcase" — Pre-loaded Demo Content

Create a system "Wavic Demo" artist space that every new user can access as a read-only collaborator:

📦 Wavic Demo (Artist Space)
├── 🎵 Sample Album (Project)
│   ├── 🎶 "Neon Dreams" — 2 audio versions, with sample comments
│   ├── 🎶 "Midnight Circuit" — 1 audio version, cover art uploaded
│   └── 🎶 "Cloud Atlas" — Final version approved
└── 🎵 In-Progress EP (Project)
    ├── 🎶 "Untitled Beat" — 1 rough demo
    └── 🎶 "Sketch #4" — No audio, just metadata

This lets new users:

• See the waveform player in action
• Understand versioning (v1, v2)
• Read sample time-synced comments
• Experience the project hierarchy (Artist → Project → Track)
• Feel like the platform is alive, not empty

Implementation Options:

Approach	Complexity	Pros	Cons
Shared read-only space	Low	Single source of truth, always current	Need to protect from deletion
Cloned per-user demo	Medium	User can edit/delete freely	Storage duplication
Static guided tour	Low	No backend needed, just UI tooltips	Not interactive, feels fake

Recommendation: Shared read-only space. A single "Wavic Demo" artist space with a system-level owner account. New users are auto-added as Viewers. They can browse, play audio, and read comments, but not edit. A prominent "Create Your Own" CTA leads them to create their first real artist space.

---

8. Validation & Security Hardening

8.1 Backend Registration DTO (Critical Fix)

Current: No RegisterDto — zero server-side validation on registration.

Fix — Create register.dto.ts:

// src/modules/user/dto/register.dto.ts
import {
  IsEmail,
  IsNotEmpty,
  IsOptional,
  IsString,
  MinLength,
  Matches,
} from 'class-validator';

export class RegisterDto {
  @IsOptional()
  @IsString()
  fullName?: string;

  @IsEmail({}, { message: 'Invalid email address' })
  @IsNotEmpty({ message: 'Email is required' })
  email: string;

  @IsString()
  @MinLength(6, { message: 'Password must be at least 6 characters' })
  @Matches(/[A-Z]/, {
    message: 'Password must contain at least one uppercase letter',
  })
  @Matches(/[a-z]/, {
    message: 'Password must contain at least one lowercase letter',
  })
  @Matches(/\d/, { message: 'Password must contain at least one number' })
  password: string;
}

Update controller:

@Post('register')
async create(@Body() registerDto: RegisterDto) {
  const user = await this.userService.create(registerDto);
  // ...
}

8.2 Auth Endpoint Throttling

Add stricter rate limiting for auth routes:

// user.controller.ts
import { Throttle } from '@nestjs/throttler';

@Post('register')
@Throttle({ default: { limit: 5, ttl: 60000 } })  // 5 registrations per minute per IP
async create(@Body() registerDto: RegisterDto) { ... }

@Post('login')
@Throttle({ default: { limit: 10, ttl: 60000 } })  // 10 login attempts per minute per IP
async login(@Body() loginDto: LoginDto) { ... }

8.3 Additional Security Measures

Measure	Priority	Description
Device fingerprinting	🟡 Medium	Track sign-up device hash to detect multi-account abuse
IP-based registration cooldown	🔴 High	Max 3 registrations per IP per hour
Disposable email detection	🟡 Medium	Block temp email providers (yopmail, guerrillamail, etc.)
Email verification	🟡 Medium	Send verification link, activate account on click
CAPTCHA on registration	🟢 Low	reCAPTCHA v3 (invisible) for suspected bots
Password breach check	🟢 Low	Check against HaveIBeenPwned API

8.4 Frontend Validation Alignment

Current Zod schema (signup.schema.ts) validates:

• fullName: min 1 char ✅
• email: valid email format ✅
• password: min 6 chars + uppercase + lowercase + number ✅

Proposed changes:

• Make fullName optional (can be enriched later)
• Add confirmPassword field for explicit confirmation
• Add real-time username availability check (if using custom username)

---

9. Test User Convention

For Development & QA

Allow test users that bypass any future email verification while still testing the real registration flow:

Pattern:

Email:    test{N}@test{N}.com     (e.g., test10@test10.com, test11@test11.com)
Password: Test1234                (always the same)
Name:     Test User {N}           (auto-derived from email)

Implementation — Backend whitelist check:

// user.service.ts — inside create()
private isTestUser(email: string): boolean {
  if (process.env.NODE_ENV === 'production') return false;
  return /^test\d+@test\d+\.com$/.test(email);
}

// In registration flow:
if (!this.isTestUser(email)) {
  // Apply full validation, rate limiting, email verification
} else {
  // Skip email verification, allow simplified registration
  // Still hash password and create real DB record
}

Frontend — Pre-fill test credentials in dev mode:

// sign-up-form.tsx
const isDev = process.env.NODE_ENV === 'development';
const initialValues = {
  fullName: isDev ? 'Test User' : '',
  email: isDev ? 'test10@test10.com' : '',
  password: isDev ? 'Test1234' : '',
};

Security: Test users are NEVER available in production

The isTestUser() check only returns true when NODE_ENV !== 'production'. In production, test10@test10.com goes through the full validation flow like any other email.

---

10. Implementation Roadmap

Phase 1: Security Hardening (Immediate — 1-2 days)

• [ ] Create RegisterDto with class-validator decorators
• [ ] Add @Throttle() to register/login endpoints (5/10 per minute)
• [ ] Add test user convention (dev-only bypass)
• [ ] Update frontend signup schema (make fullName optional)

Phase 2: Username Auto-Generation (1 day)

• [ ] Implement generateUsername() in user.service.ts
• [ ] Auto-assign on registration
• [ ] Update onboarding step 1 to show generated name with edit option

Phase 3: Entrance Animation (2-3 days)

• [ ] Implement chosen animation option (A, B, C, D, or E)
• [ ] Create transition page/component between sign-up and onboarding
• [ ] Ensure animation is interruptible and performant on mobile
• [ ] Preload onboarding data during animation

Phase 4: Streamlined Onboarding (1-2 days)

• [ ] Merge username + photo into single step
• [ ] Add "Or explore with sample tracks" option
• [ ] Defer artist space creation to audio upload step
• [ ] Google OAuth users auto-inherit name + photo

Phase 5: Sample Data & Demo Content (2-3 days)

• [ ] Create "Wavic Demo" system artist space with sample tracks
• [ ] Auto-add new users as Viewers
• [ ] Build "Create Your Own" CTA on demo content
• [ ] Design empty state that guides to demo content

Phase 6: Advanced Security (Ongoing)

• [ ] Email verification flow
• [ ] Disposable email detection
• [ ] Device fingerprinting for multi-account detection
• [ ] JWT refresh token mechanism
• [ ] Password breach check integration

---

Related Documents

Document	Relevance
07-AUTHENTICATION.md	Auth architecture, JWT flow, NextAuth configuration
12-UI-UX-DESIGN-SYSTEM.md	Visual identity, animation principles, component library
13-E2E-WORKFLOWS.md	End-to-end user flows including onboarding
PLATFORM-VISION.md	Mission statement, design principles, target users
SECURITY.md	Infrastructure security checklist, SSL/TLS, Key Vault

---

Document created: February 2026Status: Design exploration — awaiting option selection for animation & username strategy