Most Copied Snippets

Based on real usage and copy activity

#1 Apple-Style Scroll Storytelling Hero

Apple-style scroll storytelling section with sticky scene, scroll-driven text transitions, and immersive cinematic progression

<section class="w-full bg-black text-white">

  <!-- SCROLL CONTAINER -->
  <div class="h-[300vh] relative">

    <!-- STICKY FRAME -->
    <div class="sticky top-0 h-screen flex items-center justify-center overflow-hidden">

      <!-- Background -->
      <div class="absolute inset-0">
        <im...

#2 Editorial Image Grid Showcase

copies5

High-impact editorial grid with asymmetric layout, hover zoom, and modern brand storytelling

<section class="w-full bg-white py-16 px-6">

  <div class="max-w-7xl mx-auto">

    <!-- Grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 auto-rows-[200px]">

      <!-- Large Left -->
      <div class="col-span-2 row-span-2 relative group overflow-hidden rounded-2xl">
        <img sr...

#3 Cinematic Mascot Login

copies1

Production-level animated login with SVG mascot, smooth physics-like eye tracking, organic blinking, and realistic hand motion

<section class="w-full min-h-screen bg-[#F5F6F7] flex items-center justify-center px-4">

  <div class="w-full max-w-sm bg-white border rounded-2xl p-8 shadow-sm text-center">

    <!-- MASCOT -->
    <div id="mascot" class="relative w-32 h-32 mx-auto mb-6">

      <svg viewBox="0 0 200 200" class="...

#4 Hyper Speed Tunnel Hero (Extended Narrative)

copies1

Cinematic hyper-speed tunnel hero with extended storytelling text, layered typography, and immersive space effect

<section class="w-full h-screen bg-black overflow-hidden relative">

  <canvas id="tunnel"></canvas>

  <!-- CONTENT -->
  <div class="absolute inset-0 flex flex-col items-center justify-center text-center px-6 pointer-events-none">

    <div class="max-w-3xl space-y-6">

      <p class="text-xs tra...

#5 Card Testing Component

copies1

Card Testing Component

<div class="w-72 bg-white rounded-2xl shadow-md overflow-hidden transition hover:shadow-xl hover:-translate-y-1">
  
  <!-- Imagen -->
  <img 
    src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=800"
    alt="Producto"
    class="w-full h-44 object-cover"
  />

  <!-- Conten...

#6 Interactive AI Graph Network

copies1

Animated node graph with dynamic connections, hover reactions, and organic motion simulating AI relationships

<section class="w-full h-[500px] bg-[#020617] relative overflow-hidden flex items-center justify-center">

  <canvas id="graph"></canvas>

  <script>
    const canvas = document.getElementById("graph");
    const ctx = canvas.getContext("2d");

    canvas.width = window.innerWidth;
    canvas.height...

#7 Before / After Comparison Slider

copies1

Interactive before-after image comparison with draggable slider

<section class="w-full max-w-4xl mx-auto py-16 px-6">

  <div class="relative overflow-hidden rounded-2xl border">

    <!-- Before -->
    <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop"
         class="w-full h-[400px] object-cover">

    <!...

#8 Lightspeed Star Tunnel Hero

copies1

Cinematic warp-speed star tunnel with mouse-controlled center for immersive space travel effect

<section class="w-full h-screen bg-black overflow-hidden relative">

  <canvas id="tunnel"></canvas>

  <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
    <h1 class="text-white text-4xl md:text-6xl font-semibold tracking-tight text-center">
      Enter Hyper Spee...