🎨 The UI/UX Update
This is a sub-issue of #56 under the redesigned website UI system and focuses on building a reusable background holder tile component that provides subtle visual motion and scroll-driven interaction.
This issue is open for contributors interested in improving new-design.
This issue aims to introduce a background holder tile component to serve as a decorative, interactive visual layer across sections of the website. The component will not contain any text, buttons, or interactive content elements for now. It will be created as a function first as a design and motion asset.
The tile features a subtle, uneven line that introduces fluid motion as the user scrolls. The animation should feel organic and responsive to user behaviour while remaining visually subtle and non-distracting.
Additionally, the component must support both light mode and dark mode transitions as specified in the Figma design.
Figma file - https://www.figma.com/design/wC1eX3E1CfOkfRrDMSqEcl/Resonate-AOSSIE-Design-File?node-id=16-6554&t=0Gx3W0dzXJCkaqsT-1
The tile also includes staged visual transitions in light mode that eventually fade out.
Current Design Issues
- Scroll-based motion behaviour is not yet implemented.
- Theme-specific animation behaviours (light mode and dark mode transitions) are not defined.
- The subtle background line animation requires careful implementation to maintain fluidity and performance.
- Positioning of the component relative to page scroll and section transitions has not been done.
- Responsiveness across breakpoints needs to be addressed.
Proposed Solution
Contributors are expected to create a reusable and performance-optimised (No unnessesary dependecy or library installed for basic effects) background holder tile component with the following functionality:
Scroll-Based Fluid Animation
- The uneven background line should:
- Move fluidly and organically in response to scroll movement.
- Introduce a slight random jiggle-like motion.
- Pause animation when scrolling stops.
Theme-Based Visual Behaviour
Light Mode
- Tile colour transitions from light purple to a whitish tone.
- After completing the transition stages, the tile gradually fades out.
Dark Mode
- Styling and transitions should follow the Figma design.
- Motion behaviour should remain consistent with light mode while maintaining contrast and visual clarity.
Scroll Position Integration
- The component must align properly with the website's scroll behaviour.
- Tile appearance and animation should integrate naturally with section transitions.
Responsiveness
- Component must scale and adapt across desktop, tablet, and mobile devices.
- Motion and positioning should remain visually consistent across screen sizes.
📌 Acceptance Criteria
Design Considerations
🎨 The UI/UX Update
This is a sub-issue of #56 under the redesigned website UI system and focuses on building a reusable background holder tile component that provides subtle visual motion and scroll-driven interaction.
This issue is open for contributors interested in improving new-design.
This issue aims to introduce a background holder tile component to serve as a decorative, interactive visual layer across sections of the website. The component will not contain any text, buttons, or interactive content elements for now. It will be created as a function first as a design and motion asset.
The tile features a subtle, uneven line that introduces fluid motion as the user scrolls. The animation should feel organic and responsive to user behaviour while remaining visually subtle and non-distracting.
Additionally, the component must support both light mode and dark mode transitions as specified in the Figma design.
Figma file - https://www.figma.com/design/wC1eX3E1CfOkfRrDMSqEcl/Resonate-AOSSIE-Design-File?node-id=16-6554&t=0Gx3W0dzXJCkaqsT-1
The tile also includes staged visual transitions in light mode that eventually fade out.
Current Design Issues
Proposed Solution
Contributors are expected to create a reusable and performance-optimised (No unnessesary dependecy or library installed for basic effects) background holder tile component with the following functionality:
Scroll-Based Fluid Animation
Theme-Based Visual Behaviour
Light Mode
Dark Mode
Scroll Position Integration
Responsiveness
📌 Acceptance Criteria
Design Considerations