Vertical Strips

pnpm dlx @sikka/naseem add strips-vertical

npx @sikka/naseem add strips-vertical

yarn dlx @sikka/naseem add strips-vertical

bunx --bun @sikka/naseem add strips-vertical

Usage

The Vertical Strips component displays a row of image strips that expand vertically when clicked. It creates an engaging gallery experience with smooth spring animations.

import VerticalImageStrips from "@/components/elements/strips-vertical"

export default function Example() {
  return <VerticalImageStrips />
}

Features

• Smooth spring animations powered by Motion
• Responsive design (adapts to mobile and desktop)
• Click to expand/collapse strips
• Image scale animation on expand
• Dark overlay with gradient
• Label reveal with blur animation
• Index counter display
• Custom DM Mono typography
• Configurable gaps between strips

Implementation

The component uses:

• motion from Motion for smooth spring animations
• useState and useEffect for state management and responsive behavior
• CSS-in-JS for dynamic styling
• Google Fonts (DM Mono) for typography

Code Structure

"use client";

import { motion } from "motion/react";
import { useState, useEffect } from "react";

const images = [
  {
    url: "https://example.com/image.jpg",
    label: "Image Label",
  },
  // Add more images...
];

export default function VerticalImageStrips() {
  const [open, setOpen] = useState<null | number>(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  // Responsive dimension handling
  // Render motion strips...
}

Props

The Vertical Strips component is self-contained and manages its own state internally. It doesn't accept any props as the content is defined within the component.

Customization

To customize the images, modify the images array at the top of the component file:

const images = [
  {
    url: "https://your-image-url.jpg",
    label: "Your Label",
  },
  // Add more images...
];

Configuration Values

The component uses responsive configuration values:

Dependencies

{
  "motion": "latest"
}

Styling

The component uses inline styles for dynamic values and includes:

• Spring animations with bounce and stiffness
• Gradient overlays for text readability
• Blur transitions for label reveals
• Scale animations for images
• Configurable border radius between strips