Editorial service list

Component 12

About

An editorial services accordion block featuring numbered offerings, subtle hover offset animations, and smooth expandable descriptions. Useful in agency portfolios, design studios, and consultancy websites.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Editorial service list to your project and fits it to your theme.

Code

How Editorial service list is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import Component, { type Props, type State } from "@/components/ui/editorial-service-list";

const settings = { title: "Considered from\nevery angle." };
export const loopDuration = 6;

const ease = (x: number) => {
  const n = Math.max(0, Math.min(1, x));
  return n * n * (3 - 2 * n);
};

const pulse = (t: number, start: number, end: number) =>
  ease((t - start) / 0.3) * (1 - ease((t - end) / 0.3));

// Pure timeline: export frame n by passing n / 60. No timers or network calls.
export function showcase(time: number): State {
  const t = ((time % loopDuration) + loopDuration) % loopDuration;
  const a = pulse(t, 0.6, 2.7);
  const b = pulse(t, 3, 5.2);
  return {
    expanded: a > 0 ? 0 : b > 0 ? 1 : -1,
    reveal: Math.max(a, b),
  };
}

export default function Demo(props: any = {}) {
  const { showcaseTime, ...incoming } = props;
  const merged = { ...settings, ...incoming };
  return (
    <div className="w-full min-h-[520px] flex items-center justify-center p-4 sm:p-6 bg-background">
      <Component
        {...merged}
        state={showcaseTime === undefined ? incoming.state : showcase(showcaseTime)}
        seeking={showcaseTime !== undefined || incoming.seeking}
      />
    </div>
  );
}