Nomen — Privacy-first Batch Renamer
A browser-only batch file renamer with composable rules, live diff previews, conflict detection, offline PWA support and exportable rename plans.
The product tension
Nomen handles the risky part of batch renaming before anything is written. Files stay in the browser, original binaries remain untouched by default, and every transformation is previewed as an original-to-renamed diff with conflicts surfaced before export.
Designed and implemented the rule pipeline, live filename diff, conflict safeguards, multi-format export, bilingual interface and offline installable workflow.
Context
Nomen handles the risky part of batch renaming before anything is written. Files stay in the browser, original binaries remain untouched by default, and every transformation is previewed as an original-to-renamed diff with conflicts surfaced before export.
Nomen is presented as a personal project, so the case study separates verified implementation decisions from illustrative product framing.
Problem
The central product problem is safe bulk renaming, composable transformation rules, instant original-to-result comparison and local-only file handling.
The interface needs to carry enough detail for informed action without turning every decision into visual noise.
Goals
Make the primary user journey legible within seconds, preserve a distinct product identity and ensure that motion improves orientation.
Keep the system resilient across keyboard use, touch devices, reduced-motion preferences and realistic content lengths.
Constraints
No unverified client constraints or performance metrics are claimed. The concept therefore uses explicit representative constraints: mobile-first behavior, accessible interaction, recoverable states and a maintainable frontend architecture.
Decorative complexity is rejected whenever it competes with product understanding.
Responsibility
The represented role is Product Designer and Frontend Developer.
Designed and implemented the rule pipeline, live filename diff, conflict safeguards, multi-format export, bilingual interface and offline installable workflow.
Discovery
The discovery pass maps the core task, interruption points, information users need before acting and the states that can undermine trust.
For this direction, special attention is placed on safe bulk renaming, composable transformation rules, instant original-to-result comparison and local-only file handling.
Information architecture
Content is organized from orientation to action, then from action to feedback. Secondary detail remains available without competing with the next meaningful step.
Routes and content blocks are data-driven so the case-study system can grow without hardcoding a component for every slug.
UX decisions
Persistent context is used only where losing position would create real friction. Hover is treated as enhancement, never the only path to content.
Status, progress and errors combine language, structure and visual treatment instead of relying on color alone.
Visual direction
The visual identity uses #7ee7c8 as a focused project signal rather than a page-wide neon effect.
Editorial scale, technical annotations and custom SVG composition create character without imitating a specific award site.
Design system
Semantic color, fluid type, spacing and motion tokens keep the interface coherent while allowing each project to own a distinct visual field.
Corners and surfaces are deliberately limited; hierarchy is carried primarily through type, line, spacing and composition.
Motion system
GSAP timelines handle sequences, ScrollTrigger handles viewport-linked transitions and CSS handles small state feedback.
Every major movement defines its trigger, final state, cleanup behavior, mobile adaptation and reduced-motion fallback.
Technical implementation
The proposed stack is React, TypeScript, Vite, PWA.
Server-rendered content stays outside client components where possible. Animation registration is centralized and selectors are scoped to component roots.
Responsive strategy
Mobile is recomposed rather than scaled down. Pinned or hover-heavy desktop behavior becomes direct vertical content, with visible media and practical touch targets.
Fluid typography and spacing reduce breakpoint jumps while hard limits prevent headings from overflowing at either extreme.
Accessibility
Semantic headings, landmarks, keyboard navigation, visible focus, readable contrast and descriptive controls are part of the base implementation.
Decorative SVG is hidden from assistive technology; informative diagrams receive names and descriptions.
Performance
Animation prioritizes transforms, opacity and SVG stroke progress. Continuous effects use limited layers and are disabled or simplified when user or device conditions call for it.
Media and experiments remain isolated from routes that do not need them.
Challenges
The main challenge is balancing a memorable visual identity with a product experience that remains immediately understandable.
Another challenge is preserving motion quality without creating lifecycle leaks, double animation loops or fragile mobile behavior.
Solutions
The solution is a small set of recurring motifs, a block-based content model and a motion architecture built around scoped contexts.
A single Lenis instance is synchronized with the GSAP ticker, while reduced motion returns scrolling and content to native behavior.
Outcome
The qualitative outcome is a coherent concept that makes its product intent visible through hierarchy, interaction and state design.
Verified metrics can be added later without restructuring the case study; until then, the interface does not invent growth or conversion claims.
Lessons learned
A strong visual concept becomes more convincing when its motion, content model and failure states share the same logic.
Restraint is a technical and design skill: fewer active motifs make each interaction more legible.
Next steps
Replace structured placeholders with verified project dates, contributors, links and outcomes.
Run device testing with production media, profile performance on representative hardware and validate the experience with real users.
Rename system
- 01Composable rule pipeline
- 02Regex & token patterns
- 03Live difference preview
- 04Conflict resolution
- 05ZIP / CSV / JSON / shell exports
- 06Offline PWA mode
“Clean names. Clear files. No upload required.”
VenvSweep
Open case study