"An advanced UI interaction experiment exploring focused state amplification and background 'shiver' effects through CSS keyframe orchestration."
User focus is a finite resource. This project explores Selective Attention UI, where a primary interaction (zooming a card) triggers a secondary "distortion" effect on non-active elements. By utilizing high-frequency CSS shake animations, I created a visual hierarchy that intuitively guides the user's eye toward active content while adding a playful, organic feel to the layout.
This experiment focuses on Contextual State Management:
- State-Driven Distortion: Implementing a global "hover/active" state where sibling elements receive a rapid, low-amplitude transform animation to simulate an "ant-like" movement.
- Scale & Reveal Logic: Utilizing
transform: scale()paired withoverflow: hiddento transition from a compact card to a detailed information view without disrupting the grid flow. - Performance-Optimized Jitter: Using hardware-accelerated
translate3dfor the shaky effect to ensure high frame rates even when multiple elements are animating simultaneously. - Relative Transition Timing: Synchronizing the zoom speed of the active card with the jitter frequency of the others to maintain a harmonious visual rhythm.
- Interactive Zoom: Smooth expansion of clicked cards to reveal hidden metadata.
- Ant-Movement Effect: A unique "distorted" animation for inactive cards, providing dynamic feedback.
- Responsive Grid Architecture: Fully fluid layout that preserves the interaction logic across mobile and desktop viewports.
- HTML5: Structured containers for modular card units.
- CSS3: Intensive use of
@keyframes,transform-origin, and transition delays for complex state-dependent styling.
- Clone the repository:
git clone [https://github.com/emineugurlu/Modern-Card-Design.git](https://github.com/emineugurlu/Modern-Card-Design.git)
- Open the Project:
cd Modern-Card-Design open index.html
Developed by Emine Uğurlu with a focus on experimental CSS motion and UX psychology.