Jelly

February 8, 2025

A fluid and interactive UI element that adds a playful blob-like animation to your Astro projects. Perfect for creating engaging hover effects or dynamic backgrounds, the Jelly component brings a touch of organic movement to your web designs.

The Alpes

@wickedmishra on Dribbble

./src/components/ui/ JellyMain .astro

---
import Jelly from "../butter/Jelly.astro";

const data = [
  {
    title: "The Alpes",
    owner: "@wickedmishra on Dribbble",
    location: "Zugspitze, Alemania",
    alt: "text alternative",
    src: "https://w0.peakpx.com/wallpaper/980/128/HD-wallpaper-sunset-over-the-village-wamberg-bavarian-alps-trees-germany-mountains-cabin-clouds-sky.jpg",
    width: "w-60",
    height: "h-72",
    containerClass: "",
    titleClass: "",
    ownerClass: "",
    locationClass: "",
    animate: true,
  },
];
---

{data.map((item) => <Jelly {...item} />)}

Root

Prop	Default	Type	Description
`title`	-	`string`	Title of the card
`titleClass`	-	`string`	Additional classes for the title
`owner`	-	`string`	Name of the owner or author
`ownerClass`	-	`string`	Additional classes for the owner name
`location`	-	`string`	Location associated with the card
`locationClass`	-	`string`	Additional classes for the location
`containerClass`	-	`string`	Additional classes for the main container
`src`	-	`string`	URL of the background image
`alt`	-	`string`	Alternative text for the image
`icon`	’location’	`string`	Name of the icon for the location
`width`	’w-60’	`string`	Tailwind class for the container width
`height`	’h-72’	`string`	Tailwind class for the container height
`animate`	true	`boolean`	Determines if the reveal animation is applied on hover

Features

Customizable image display
Flexible content structure
Optional hover animations
Responsive layout

Example

Card Gallery

Iglesia en Frankfurt

@heeector on Twitter

Castillo de Neuschwanstein

@travelphotographer on Instagram

Puerta de Brandenburgo

@berlinlover on Twitter

Puerto de Hamburgo

@maritimephotography on Instagram

./src/components/ui/ JellyCards .astro

---
import JellyReveal from "../butter/Jelly.astro";

const cardsData = [
  {
    title: "Iglesia en Frankfurt",
    owner: "@heeector on Twitter",
    location: "Dreikonigskirche, Alemania",
    src: "https://www.expedia.mx/stories/wp-content/uploads/2021/11/Aerial-view-of-Cologne-Germany.jpg",
    alt: "Iglesia en Frankfurt",
  },
  {
    title: "Castillo de Neuschwanstein",
    owner: "@travelphotographer on Instagram",
    location: "Baviera, Alemania",
    src: "https://upload.wikimedia.org/wikipedia/commons/f/f8/Schloss_Neuschwanstein_2013.jpg",
    alt: "Castillo de Neuschwanstein en los Alpes bávaros",
  },
  {
    title: "Puerta de Brandenburgo",
    owner: "@berlinlover on Twitter",
    location: "Berlín, Alemania",
    src: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Brandenburger_Tor_abends.jpg/1200px-Brandenburger_Tor_abends.jpg",
    alt: "Puerta de Brandenburgo iluminada por la noche",
  },
  {
    title: "Puerto de Hamburgo",
    owner: "@maritimephotography on Instagram",
    location: "Hamburgo, Alemania",
    src: "https://a.cdn-hotels.com/gdcs/production143/d1112/c4fedab1-4041-4db5-9245-97439472cf2c.jpg",
    alt: "Vista panorámica del Puerto de Hamburgo",
  },
];
---

<div class="w-full flex justify-center">
  <div class="grid grid-cols-2 gap-4 place-items-center">
    {
      cardsData.map(({ title, owner, location, src, alt }) => (
        <JellyReveal
          title={title}
          owner={owner}
          location={location}
          src={src}
          alt={alt}
          width="w-52"
          height="h-52"
          containerClass="shadow-lg"
          titleClass="!text-body"
          ownerClass="italic"
          locationClass="font-semibold"
        />
      ))
    }
  </div>
</div>