Home
Juan D. Cortorreal
Smooth Scale & Float Reveal

Smooth Scale & Float Reveal

An enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.

This tailwind example is contributed by Juan D. Cortorreal, on 28-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Juan D. Cortorreal

327

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smooth Scale Reveal Demo</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    /* Estilos demo */
    body { font-family: 'Segoe UI', sans-serif; margin: 0; background: #111; color: white; overflow-x: hidden; }
    h1 { text-align: center; margin-top: 50px; font-weight: 300; }
    
    /* Cajas para visualizar el efecto */
    .card {
        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
        min-height: 400px;
        margin: 50px auto;
        width: 80%;
        max-width: 800px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
  </style>
</head>
<body>

<h1>Scroll Down to see the Magic 👇</h1>

<div class="card reveal">
    <span>✨ Floating Card 1</span>
  </div>

<div class="card reveal">
    <span>🚀 Floating Card 2</span>
  </div>

<div class="card reveal">
    <span>🎨 Floating Card 3</span>
  </div>

Related Examples

CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

1 year ago

1.8k
Product card for e-commerce
A responsive product card for e-commerce, displaying product image, country flag, volume, name, and price, with hover effects and a clean layout.

Author:
Maxim

1 year ago

1.5k
Battery and signal
Battery and signal bar component

Author:
ardianhu

1 year ago

1k
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.8k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

1 month ago

125
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

10 months ago

1.4k
Animated cards

Author:
Michael Andreuzza

1 year ago

7k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

9 months ago

1.2k
Info cards

Author:
Samuel Dawson

3 years ago

11.1k
Card Princing

Author:
Raul antonio de la cruz hernandez

1 month ago

48
card

Author:
Raul antonio de la cruz hernandez

1 month ago

107
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components