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

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

Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

1 month ago

307
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

8 months ago

1.1k
Product card

Author:
Oliver Hansen

2 years ago

13.8k
google ui cards
google ui cards

Author:
Anonymous

2 years ago

9.7k
Feature card

Author:
Matti

11 months ago

1.1k
Article-Post Preview card

Author:
Prashant

3 years ago

9.9k
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.1k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

2.2k
Simple Card section

Author:
Akram Khan

1 year ago

2.4k
Card with full width image
centered content

Author:
Mr Robot

2 years ago

10.1k
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

7 months ago

940
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

5 months ago

908

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components