BAD OMEN is a production-oriented frontend for an illustrated urban-myth universe: 222 planned carriers, five factions, and one city that denies everything. The visual direction is a Fashion Editorial Warning System—newsprint, evidence labels, oversized condensed type, warning color, and authored concept portraits.
The Drop mints on Solana through a LaunchMyNFT embed. Set NEXT_PUBLIC_SOLANA_RPC in .env.local (see .env.example).
- Next.js App Router, React, and TypeScript
- Plain CSS with shared visual tokens and responsive layouts
- Motion for React for restrained, progressive animation
- Radix Dialog for mobile navigation focus behavior
- Vitest and Testing Library for component/data coverage
- Playwright and axe-core for browser flows and accessibility checks
npm install
npm run devOpen http://localhost:3000. Production verification commands are:
npm run lint
npm run typecheck
npm test -- --run
npm run test:e2e
npm run buildsrc/app— routes, metadata, global visual systemsrc/components— shell, collection, factions, editorial pages, and mint dropsrc/data— typed local carrier, faction, archive, notice, roadmap, FAQ, and trait recordssrc/lib— collection utilities and LaunchMyNFT bootstrappublic/art— optimized generated concept studiesdocs— design brief, implementation plan, research, art prompts/QA, motion rules, decisions, and auditse2e— primary browser journeys
Carrier and faction records live in src/data. Keep carrier IDs, slugs, factions, statuses, and image paths type-safe; update the sitemap when introducing a new route family.
Artwork is loaded from public/art through next/image. Every current raster is a generated concept study, not final collection art. The generation prompts and acceptance checklist are documented in docs/art-prompts.md and docs/art-qa.md. Replace files at the same paths to preserve layouts, or update the corresponding typed data path and authored alt text. Final production art should pass model-sheet consistency, human refinement, trait compatibility, and 48-pixel silhouette review.
/mint boots LaunchMyNFT (ownerId / collectionId in src/lib/launchMyNft.ts) with a custom Solana RPC from NEXT_PUBLIC_SOLANA_RPC. Host DOM nodes are created before solana.js loads, then reparented into the mint page. Do not commit RPC API keys.
The site includes a skip link, semantic landmarks, visible focus treatment, keyboard/touch equivalents for optional faction activities, persistent but guarded display preferences, designed recovery states, reduced-motion behavior, and a list alternative for the collection wall. Motion never gates navigation or core content. See docs/motion-system.md for the timing and fallback contract.
docs/ui-research.md records official-source research and dependency/licensing decisions. docs/design-decisions.md explains the creative and product boundaries. Generated imagery is disclosed in the interface and documentation.
The final review applied UI/UX Pro Max, Framer Motion, and frontend-design guidance, followed by axe, responsive, route, security, dependency, and measured local-production checks. Evidence and fixes are recorded in docs/audits. The creative build also used brainstorming, planning, TDD, senior-frontend, image-generation, parallel-agent, systematic-debugging, and verification workflows.
The repository ships authored local content and concept assets plus a LaunchMyNFT mint embed on /mint. It does not include a CMS, analytics, or authentication. Replace https://badomen.example in metadata before deployment. Set NEXT_PUBLIC_SOLANA_RPC on Vercel for production builds.