Skip to content

feat(ui): neomorphic + skeuomorphic redesign of editor surfaces - #1825

Merged
magic-peach merged 2 commits into
reframe-oss:mainfrom
1-basil:feat/neomorphic-skeuomorphic-ui
Oct 29, 2026
Merged

magic-peach merged 2 commits into
reframe-oss:mainfrom
1-basil:feat/neomorphic-skeuomorphic-ui

Conversation

@1-basil

@1-basil 1-basil commented Oct 29, 2026

Copy link
Copy Markdown
Contributor

Summary

Restyles the editor UI with a soft neomorphic look plus a skeuomorphic header.

  • Design tokens (globals.css): adds --neo-* and --skeu-* variables for light, dark and high-contrast themes. Existing variables (--bg, --surface, --border, --text, --muted) are left unchanged.
  • Utility classes: neo-raised, neo-inset, neo-pressable, skeu-plate, skeu-well, skeu-title, skeu-hang.
  • Components: cards in VideoEditor, FileUpload, DownloadResult, and the keyboard shortcuts panel now use raised surfaces. The format, framing and preset selectors use pressable/inset states in place of bordered/filled states. Text inputs, selects and textareas are inset.
  • Header: the REFRAME title is now a brushed-metal plate that hangs on two wires and tilts slightly on hover.
  • Cleanup: the privacy tagline appeared twice (once mobile-only, once below), so it's now a single line.
  • Accessibility: high-contrast mode drops the shadows and goes back to solid borders. prefers-reduced-motion turns off the header swing.
  • page.tsx: only the className on the "Star on GitHub" link changed. The structure is the same.

All class merging still goes through cn(). No new dependencies.

Test plan

  • Check the editor in light, dark and high-contrast themes
  • Check that the selected state is clear for format, framing and preset buttons
  • Check the mobile layout of the header
  • Check that the header doesn't swing with reduced motion turned on
  • CI and the Vercel preview pass

🤖 Generated with Claude Code

- Add --neo-* and --skeu-* tokens (light, dark, high-contrast) and
  neo-raised / neo-inset / neo-pressable / skeu-plate utility classes
- Restyle cards, selectors, inputs and footer with soft extruded shadows
- Turn the REFRAME header into a hanging brushed-metal plate
- Merge the duplicated privacy tagline into one line
- Respect prefers-reduced-motion and flatten effects in high-contrast mode

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@netlify

netlify Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for reframe-os ready!

Name Link
🔨 Latest commit 1459a43
🔍 Latest deploy log https://app.netlify.com/projects/reframe-os/deploys/6ae2f380e68c5e11a9496a7d
😎 Deploy Preview https://deploy-preview-1825--reframe-os.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions

Copy link
Copy Markdown
Contributor

⚠️ PR Format Issues — @1-basil

Please fix the following before your PR can be reviewed:

  • ⚠️ No linked issue found. Add Closes #<issue-number> to your PR description.

Push new commits after fixing — this comment will update automatically.

📖 CONTRIBUTING.md

@github-actions github-actions Bot added level:advanced Advanced level - 55 pts type:design UI/UX design type:refactor Code refactor type:testing Testing labels Oct 29, 2026
@github-actions

Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @1-basil!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions github-actions Bot added the level:intermediate Intermediate level - 35 pts label Oct 29, 2026
@magic-peach
magic-peach merged commit 9256fbe into reframe-oss:main Oct 29, 2026
16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

level:advanced Advanced level - 55 pts level:intermediate Intermediate level - 35 pts type:design UI/UX design type:refactor Code refactor type:testing Testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants