Service Preview Switcher

Component

About

A responsive services section with accessible tabs and visual previews, useful for agencies and studios explaining their disciplines, deliverables, and approach.

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

Code

How Service Preview Switcher 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/service-preview-switcher";
const settings = {"title": "Different disciplines.\nOne considered approach."};
const ease=(x:number)=>{x=Math.max(0,Math.min(1,x));return x*x*(3-2*x)};
const pulse=(t:number,start:number,end:number)=>ease((t-start)/.3)*(1-ease((t-end)/.3));
export function showcase(time:number):State{const t=((time%6)+6)%6;if(t<1.3)return {active:0};if(t<2.9)return {active:1,previous:0,blend:ease((t-1.3)/.45)};if(t<4.6)return {active:2,previous:1,blend:ease((t-2.9)/.45)};return {active:0,previous:2,blend:ease((t-4.6)/.45)};}
export default function Demo(props:Props & {showcaseTime?:number}) {
  const {showcaseTime,...incoming}=props;
  const merged={...settings,...incoming};
  return <div style={{width:"100%",minWidth:0}}><Component {...merged} state={showcaseTime===undefined?incoming.state:showcase(showcaseTime)} seeking={showcaseTime!==undefined||incoming.seeking}/></div>;
}