Feature description
I'd like to integrate a custom Color Picker component into the "Elements" panel. This would replace standard browser color inputs and allow users to pick, fine-tune, and save colors for their text and graphic overlays.
Problem this solves
Currently, we rely on basic HTML color inputs. They feel inconsistent across browsers, have limited features, and don't match the modern, sleek aesthetic of the reframe editor. We also lack features like an eyedropper tool or easy hex-code management.
Proposed solution
- Architecture: Use a modular design with React portals to ensure the picker stays anchored to its button and never gets clipped by container boundaries.
- Features: - A smooth, canvas-based hue slider.
- A manual hex input field with built-in sanitization.
- Integration of the EyeDropper API so users can grab colors directly from their videos.
- Consistency: Refactor the state management to use Hex-based values throughout the application to keep input and output behavior predictable.
Alternatives considered
- Standard
<input type="color">: It’s easy to implement but provides a very "native/clunky" experience that doesn't fit our design language.
- Third-party libraries: We looked at some popular React color picker packages, but building our own allows us to keep the bundle size small and apply our specific glassmorphic styling (blur/translucency).
Additional context
I have previously developed a similar picker component that handles portal-based rendering and hex-state synchronization. I’m confident we can adapt that logic to fit perfectly into the reframe codebase without much friction.
Feature description
I'd like to integrate a custom Color Picker component into the "Elements" panel. This would replace standard browser color inputs and allow users to pick, fine-tune, and save colors for their text and graphic overlays.
Problem this solves
Currently, we rely on basic HTML color inputs. They feel inconsistent across browsers, have limited features, and don't match the modern, sleek aesthetic of the
reframeeditor. We also lack features like an eyedropper tool or easy hex-code management.Proposed solution
Alternatives considered
<input type="color">: It’s easy to implement but provides a very "native/clunky" experience that doesn't fit our design language.Additional context
I have previously developed a similar picker component that handles portal-based rendering and hex-state synchronization. I’m confident we can adapt that logic to fit perfectly into the
reframecodebase without much friction.