Overview
The framework agnostic component showcases cross-framework compatibility through an elegant animation of technology stack icons. It features React, Next.js, and HTML5 icons that lift up sequentially along a glowing blue pipeline, creating a visual representation of seamless integration across different frameworks.Use cases
- Product landing pages highlighting multi-framework support
- Documentation introducing framework compatibility
- Marketing materials showcasing platform flexibility
- Developer onboarding experiences
Installation
Usage
Props
The title displayed at the bottom of the component.
The description text displayed below the title.
Examples
Default usage
Custom text
Customization
The component offers several customization opportunities:- Animation timing: Each icon lifts up for 1200ms, with 600ms delays between transitions and 1100ms transition duration
- Card styles: Icons are displayed in gradient cards from
neutral-700toneutral-900with responsive sizing - Pipeline effect: The glowing blue pipeline uses a radial gradient mask with animated circle movement
- Dimensions: Fixed height of 20rem with responsive card sizes based on viewport width
The component uses 3D transforms with perspective effects to create depth when icons lift up. This requires browser support for CSS 3D transforms.