Card Rain Section

Scroll-driven card rain animation section with drop and zoom modes.

← Back to components GitHub Repo Playground npm

Basic Usage (Drop Mode)

Scroll down through the section to see cards fall into view one by one. The default animation mode is "drop".

Scroll down to see the card rain effect
Our
Services

Design

We craft beautiful interfaces that delight users and drive engagement through thoughtful design principles.

Development

Modern web applications built with cutting-edge technologies for performance and scalability.

Strategy

Data-driven strategies that align technology with business goals for measurable results.
<card-rain-section scroll-height="300"> <span slot="title">Our<br>Services</span> <div slot="card"> <div class="sample-card"> <h3>Design</h3> <p>Description text...</p> </div> </div> <div slot="card">...</div> <div slot="card">...</div> <button slot="actions">Learn More</button> </card-rain-section>

Zoom Mode

Set fall-mode="zoom" to make cards scale down from a large size with a blur-to-sharp transition.

Scroll down to see the zoom effect
Featured
Work

Project Alpha

A comprehensive platform redesign that increased user retention by 40%.

Project Beta

E-commerce solution handling millions of transactions with 99.9% uptime.

Project Gamma

Mobile-first application serving users across 30 countries worldwide.
<card-rain-section scroll-height="300" fall-mode="zoom"> <span slot="title">Featured<br>Work</span> <div slot="card">...</div> <div slot="card">...</div> <div slot="card">...</div> <button slot="actions">View Portfolio</button> </card-rain-section>

Custom Styles

Customize the appearance using CSS custom properties.

Scroll down to see custom-styled cards
Tech
Stack

Frontend

Lit, Web Components, Astro, modern CSS with custom properties and container queries.

Backend

Node.js, Firebase Cloud Functions, REST APIs with comprehensive documentation.

Infrastructure

Firebase Hosting, Cloud Storage, CI/CD pipelines with automated testing.
<card-rain-section scroll-height="300" style=" --crs-bg: #0a192f; --crs-card-bg: #112240; --crs-card-radius: 4px; --crs-card-padding: 32px; --crs-title-color: rgba(100, 255, 218, 0.8); --crs-title-size: 8rem; " > <span slot="title">Tech<br>Stack</span> <div slot="card">...</div> <div slot="card">...</div> <div slot="card">...</div> </card-rain-section>

CSS Custom Properties

All available CSS custom properties for styling the component.

Property Default Description
--crs-bg #1a1618 Background color of the canvas area
--crs-card-bg var(--accent-gold, #bfa15f) Card background color
--crs-card-radius 16px Card border radius
--crs-card-width 440px Card width
--crs-card-padding 48px Card inner padding
--crs-title-size 10rem Title font size
--crs-title-color rgba(255, 255, 255, 1) Title text color