logoStamp and pathFlicker defined at global CSS scope (outside @theme)
so they are always emitted. Logo uses sharp stamp+bounce entrance with
flickering path reveals.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Use scaleIn/fadeIn keyframes from globals.css for the SVG entrance
animation and path group fade-ins.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Drop richColors, apply dark glass background with subtle per-type
border tints (primary/success, red/error, amber/warning, blue/info).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Also restore scroll handling to ExportPanel and PresetLibrary, and
remove maxHeight cap from CodeSnippet in ExportPanel.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Value input now takes full width on its own row; unit selects and
swap button sit on a separate row below, each taking equal flex space.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Shared components (components/ui/):
- slider-row.tsx: SliderRow — label + display value + Slider, replaces
inline slider blocks in FileConverter, QROptions
- color-input.tsx: ColorInput — color swatch + hex text input pair,
replaces repeated inline patterns in QROptions, KeyframeProperties,
FaviconGenerator
Media tool (FileConverter.tsx):
- Remove all shadcn Select/SelectTrigger/SelectContent/SelectItem
- Replace with native <select> + selectCls (matches AnimationSettings
and all other tools)
- Use SliderRow for video/audio bitrate and image quality sliders
- Net: -6 shadcn Select trees, consistent with every other tool
QROptions.tsx:
- Use SliderRow for margin slider (remove raw Slider import)
- Use ColorInput for foreground + background color pairs
KeyframeProperties.tsx:
- Use ColorInput for background color pair (keep local SliderRow which
has a different layout with number input)
FaviconGenerator.tsx:
- Use ColorInput for background + theme color pairs
AnimationSettings.tsx:
- Remove dead bg-[#1a1a2e] per-option className (global CSS handles
select option styling via bg-popover)
Delete:
- components/media/ConversionOptions.tsx — dead code (no imports),
contained the shadcn Label/Input/Select/Slider patterns being replaced
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
ToolCard: larger icon (w-11 h-11) with violet glow on hover, top shimmer
accent line, primary-tinted badges, arrow in glass pill, stronger border/
shadow on hover, all badges shown, overflow-hidden for clean rendering
ToolsGrid: gap-4, section heading with module count callout, max-w-5xl
Stats: align to max-w-5xl, horizontal layout per stat (icon + value/label),
rounder icon container w-9 h-9
Hero: warm up CTA button with ambient bg-primary/[0.07] fill at rest
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
AppHeader:
- Remove shadcn Button → native 8×8 rounded glass icon buttons
- Shrink to h-14 (from h-16) to match sidebar header
- Add current tool name breadcrumb (navTitle) next to collapse toggle;
shows context when sidebar is collapsed or on mobile
AppSidebar:
- Remove shadcn Button → native button for mobile close
- Sidebar narrows to w-60 (from w-64); matches h-14 header
- Active state: slim absolute left-bar (0.5px) replaces harsh border-l-2;
bg-primary/10 tint kept; no border on the link itself
- Nav item text refined: 13px font-medium title + 9px mono description
- Border opacity drops to border-border/20 throughout (from border-border)
- Footer: smaller mono text, lighter icon opacity
AppPage:
- Shrink from py-8 / text-2xl to py-5 / text-lg font-semibold
- Icon wrapped in 7×7 glass pill (bg-primary/10) matching tool cards
- Description moved inline under title as 10px mono, truncated
- border-b border-border/20 separator between header and tool content
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Right column now has two elements: preview canvas (shrink-0) and a
single glass card with Keyframes|Export|Presets tabs (flex-1).
Defaults to Keyframes tab. Removes the standalone timeline card and
the redundant embedded timeline in the mobile edit panel.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Layout:
- AnimationEditor: lg:grid-cols-5 (2/5 edit, 3/5 visual); full viewport
height; mobile Edit|Preview glass pill tabs; timeline embedded in edit
panel on mobile, standalone on desktop; Export|Presets custom tab
panel at the bottom of the right column
Components (all shadcn removed):
- AnimationSettings: Card/Label/Input/Select/Button → native inputs;
direction & fill mode as 4-pill selectors; easing as native <select>;
∞ iterations as icon pill toggle
- AnimationPreview: Card/ToggleGroup/Button → glass card; speed pills
as inline glass pill group; element picker as compact icon pills;
playback controls as glass icon buttons; subtle grid bg on canvas
- KeyframeTimeline: Card/Button → glass card; embedded prop for
rendering inside another card on mobile without double glass
- KeyframeProperties: Card/Label/Input/Button → bare content section;
SliderRow uses native number input; bg color toggle as pill button
- ExportPanel: Card/Tabs/Button → bare section; CSS|Tailwind custom
tab switcher; dark terminal (#06060e) code blocks
- PresetLibrary: Card/Tabs → bare section; category pills replace Tabs;
preset cards use glass border-border/20 bg-primary/3 styling
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- QRCodeGenerator: lg:grid-cols-5 layout (2/5 options, 3/5 preview);
full viewport height; mobile Configure|Preview glass pill tabs
- QRInput: remove shadcn Textarea/Card; native <textarea> in glass panel
section; character counter in monospace
- QROptions: remove shadcn Card/Label/Input/Button/Select; EC level as
4 pill buttons with recovery % label; native color inputs + pickers;
transparent toggle as small pill; keep shadcn Slider for margin
- QRPreview: remove shadcn Card/Button/Skeleton/ToggleGroup/Tooltip/Empty;
glass card fills full height; PNG button with inline size pill group
(256/512/1k/2k); empty state and pulse skeleton match other tools
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
App Details card is now flex-1 min-h-0 so it fills the remaining left
column height, matching the right panel. Generate/Reset buttons are
pinned at the bottom of the card with a border-t divider.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Rewrites all three media components to use the glass panel design
language, fixed-height two-panel layout, and glass action buttons.
- FileConverter: lg:grid-cols-5 split — left 2/5 is the upload zone;
right 3/5 has output format pill grid + codec/quality options +
convert/reset buttons + scrollable results panel; mobile 'Upload |
Convert' tab switcher auto-advances on file selection; removed all
Card/Button/Label/Input shadcn imports; keeps Select+Slider for
codec/quality controls
- FileUpload: large flex-1 drop zone fills the left panel; file list
shows glass item cards with metadata chips; native buttons; removes
shadcn Button dependency
- ConversionPreview: glass card replaces Card; native progress bar
(div with bg-primary/65) replaces shadcn Progress; size reduction
shown as emerald/muted badge; media previews in dark-bordered
containers; all buttons are glass action buttons
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Rewrites all three units components to use the same glass panel
layout, lg:grid-cols-5 two-panel split, and interactive patterns
established by the calculate tool.
- MainConverter: category sidebar (left 2/5) replaces Select dropdown;
converter card + scrollable conversion grid (right 3/5); mobile
'Category | Convert' tab switcher; clickable conversion cards set
target unit; glass Grid/Chart toggle
- SearchUnits: native input with glass border, glass dropdown panel,
compact result rows matching font selector style
- VisualComparison: polished gradient bars, tighter spacing, cleaner
value display; all drag logic preserved
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Rewrites all four ASCII tool components to share the same design
language and spatial structure as the Calculator & Grapher tool.
Layout
- New responsive 2/5–3/5 grid (was fixed 2+1 col); matches Calculate
- Left panel: text input card + font selector filling remaining height
- Right panel: preview as the dominant full-height element
- Mobile: tabbed Editor / Preview switcher (same pattern as Calculator)
TextInput
- Replace shadcn Textarea with native <textarea>
- Glass border pattern (border-border/40, focus:border-primary/50)
- Monospace font, consistent counter styling
FontSelector
- Replace Card + shadcn Tabs + Button + Input + Empty with native elements
- Glass panel (glass rounded-xl) matching Calculate panel style
- Custom tab strip mirrors Calculator mobile tab pattern
- Native search input with glass border
- Font list items: border-l-2 left accent for selected state,
hover:bg-primary/8, rose heart for favorites
- Auto-scrolls selected item into view on external changes
- Simplified empty state to single italic line
FontPreview
- Replace Card + Button + Badge + ToggleGroup + Tooltip + Empty
- Glass panel with header row (label + font tag + action buttons)
- Controls row: native toggle buttons with primary/10 active state
- Terminal window: dark #06060e background, macOS-style chrome
(rose/amber/emerald dots), font name watermark — the hero element
- PNG export captures entire terminal including chrome at 2x
- Inline skeleton loader with pulse animation replaces Skeleton import
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a full-featured mathematical calculator and interactive function
grapher at /calculate. Powered by Math.js v15 with a HiDPI Canvas
renderer for the graph.
- Evaluates arbitrary math expressions (trig, log, complex, matrices,
factorials, combinatorics, and more) with named variable scope
- Persists history (50 entries) and variables via localStorage
- 32 quick-insert buttons for constants and functions
- Interactive graph: pan (drag), zoom (scroll), crosshair tooltip
showing cursor coords and f₁(x)…f₈(x) values simultaneously
- Up to 8 color-coded functions with inline color pickers and
visibility toggles
- Discontinuity detection for functions like tan(x)
- Adaptive grid labels that rescale with zoom
- Responsive layout: 2/5–3/5 split on desktop, tabbed on mobile
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace boolean paused with AnimState ('playing'|'paused'|'ended')
- Use onAnimationEnd to detect when finite animations finish
- Play re-enables after end and restarts the animation (replay)
- Pause only active while playing; Restart always available
- Config changes auto-restart preview so edits are instantly visible
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Inject only @keyframes (not .animated class rule) per preset thumbnail
so the main preview's .animated rule cannot override them
- Drive thumbnail animation entirely via inline style properties
- Remove isActive/currentName — presets should never appear selected
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Swap 💜 for a filled Lucide Heart icon in text-primary in both Footer and AppSidebar
- Style Valknar link with animated underline (decoration-primary on hover)
- Add sidebar footer with copyright, Heart, Valknar link, and GitFork source link
- Add author field to package.json
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Rename ColorPage → ColorManipulation (no AppPage wrapper inside)
- Move AppPage + title/description/icon to color/page.tsx, consistent with other tools
- AppPage now accepts icon prop directly; removes internal usePathname lookup and 'use client'
- All tool pages pass tool.summary as description and tool.icon as icon
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add a sixth tool with live SVG preview, customizable foreground/background
colors, error correction level, margin control, and export as PNG (256–2048px)
or SVG. URL params enable shareable state. All processing runs client-side
via the qrcode package.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add comment style selector (shadcn Select) to wrap generated ASCII art
with language-appropriate comment syntax (// # -- ; /* */ <!-- --> """).
Refactor preview controls to use shadcn ToggleGroup, Tooltip, and Badge.
Alignment is disabled when a comment style is active.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Create lib/tools.tsx as single source of truth for all tool metadata
(title, shortTitle, navTitle, description, summary, icon, etc.)
- Update AppSidebar to render nav from centralized tools list with
descriptions, remove collapse footer button
- Update AppHeader with sidebar collapse toggle, tool short title,
and app logo; remove breadcrumbs
- Update AppPage to auto-resolve tool icon from pathname
- Update ToolsGrid/ToolCard to use shared tools data, remove per-card
gradients for uniform styling
- Add per-tool HTML title via metadata exports (title template in root
layout)
- Style landing page and 404 headings with primary theme color
- Add Toolbox icon to hero CTA, GitFork icon link in footer
- Remove footer from error page and "View on Dev" buttons
- Extract ColorPage client component for RSC metadata compatibility
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Removed manual theme switching logic and ThemeProvider
- Installed and configured tailwind-scrollbar plugin
- Updated FileConverter and ConversionOptions to use shadcn Input
- Refactored FontSelector to use shadcn Tabs
- Simplified global styles and adjusted glassmorphic effects
Updated @ffmpeg/core from 0.12.6 to 0.12.10 and updated CDN URL references.
The newer version may have better Turbopack compatibility.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The 'Cannot find module as expression is too dynamic' error occurs at runtime
when FFmpeg tries to dynamically load the core module. Using CDN URLs bypasses
this bundler issue entirely since absolute URLs don't require bundler analysis.
Switched to jsdelivr CDN for FFmpeg core and WASM files - this is a proven
approach used by many projects.
Fixes: wasmLoader.ts runtime error on media conversion
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Import FFmpeg at module level instead of dynamic import. The build now
compiles cleanly without Turbopack bundler warnings.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The @ffmpeg/ffmpeg package has internal dynamic imports that Turbopack
cannot statically analyze, but they work fine at runtime. This change
moves the import to the loadFFmpeg function where it's needed, allowing
Turbopack to skip static analysis and let the bundler resolve it at runtime.
Fixes: Cannot find module as expression is too dynamic error
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- moved FFmpeg and initializeImageMagick imports to top level (static)
- removed dynamic imports that caused bundler analysis issues
- simplified ImageMagick initialization
- fixes: 'Cannot find module as expression is too dynamic' error
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
valknarandClaude Sonnet 4.6
