New
AnimationFade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 frameworksIntermediate
Loading…
A card that lifts and deepens its shadow on hover and keyboard focus.
<!-- Rules travel in a scoped style tag; only transform/opacity animate. -->
<style>
.hover-lift {
transform: translateY(0);
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease;
}
.hover-lift:hover,
.hover-lift:focus-within { transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
.hover-lift:hover, .hover-lift:focus-within { transform: none; }
}
</style>
<div class="hover-lift max-w-xs rounded-2xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-xl focus-within:shadow-xl dark:border-gray-800 dark:bg-gray-900">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Realtime collaboration</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Edit together with live cursors, comments and instant sync.</p>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
description | string | - | Description |
liftPx | number | 8 | Lift px |
className | string | '' | Additional classes merged onto the root element. |
Adjust `liftPx` for a subtler or bolder rise. The lift is transform-only and drops to nothing under reduced motion.