Glimpse

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.

Oaxaca

@Riven on Dribbble

./src/components/UI/ GlimpseMain .astro

---
import { Glimpse, GlimpseProps } from "@butter-js/ui";

const data: GlimpseProps = [
  {
    title: "Oaxaca",
    owner: "@Riven on Dribbble",
    location: "Mont Blanc, Francia",
    src: "https://cms.riven.ch/assets/8c58bd40-da78-4c05-953e-3254c94762b8?key=reduce",
    alt: "image oaxaca",
    width: "w-60",
    height: "h-72",
    animate: true,
  },
];
---

{data.map((item: GlimpseProps) => <Glimpse {...item} />)}

Features

Customizable image display
Flexible content structure
Optional hover animations
Responsive layout

API Reference

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
`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

Usage

Type: JumpyItem[]

---
import { Glimpse, GlimpseProps } from "@butter-js/ui";

const data: GlimpseProps = {
  title: "your-title",
  owner: "butter-ui",
  location: "Mont Blanc, Francia",
  src: "url",
  alt: "image butter",
  width: "w-60",
  height: "h-72",
  animate: true,
}
---

<Glimpse {...item} />

Example

Card Gallery

Animated cards 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/ GlimpseCards .astro

---
import { Glimpse, GlimpseProps } from "@butter-js/ui";

const cardsData: GlimpseProps = [
  {
    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 }) => (
        <Glimpse
          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>