A responsive services section with accessible tabs and visual previews, useful for agencies and studios explaining their disciplines, deliverables, and approach.
"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>;
}