Showcase

Animations from past Functn projects, adapted for TaylorUI. Copy the components into your project and wire them up to your own data.

Project carousel

Adapted from the Arian project: functndev/arian. The TaylorUI version keeps the same interaction pattern (image carousel + animated metadata + progress) but is restructured into reusable TaylorUI primitives and typed props.

How it works

ProjectCarousel is data-driven: pass slides and it renders the image track, previous/next controls, crossfading text (heading, year, description), and a progress bar based on the active index.

Technology used

  • Carousel* TaylorUI primitives (CarouselRoot, CarouselTrack, CarouselItem, nav buttons)
  • Embla-based controller (useCarouselController) used under the carousel primitives
  • Framer Motion (AnimatePresence, motion) for metadata transitions
  • next/image for optimized images
  • Tailwind utility classes for responsive layout and styling

Accessibility status

The implementation uses accessible carousel semantics from TaylorUI (aria-label, aria-roledescription, per-slide labels, keyboard-focusable controls). It is implemented with accessibility in mind, but it has not been formally audited against WCAG in this docs page yet.

Project Collection / Selected works

Underwater
Landscape in fog
Pink flowers
Bird on a lamp post
Red desert from above
Flying birds
Twighlight mountain
Waves on rocks
01 /08
Underwater 2018Landscape in fog 2019Pink flowers 2020Bird on a lamp post 2021Red desert from above 2022Flying birds 2023Twighlight mountain 2024Waves on rocks 2018

Project 1

Short.

A medium-length description for this project.

A longer description that wraps to multiple lines on mobile, so you can see how the layout holds up when there is more text above the progress bar.

One line again.

Another medium description with a bit more detail about the creative direction and production process behind the work.

Brief.

This slide has a very long description. It is meant to stress-test the mobile layout when copy runs on for several lines. The sizer should keep the area height stable across slides, and the bottom padding should keep the progress bar clear of the text no matter how much content is here.

Final slide — short copy.

What to copy from TaylorUI to make this work

For the snippet below to work in another project, copy these files:

  • src/ui/components/carousel/project-carousel.tsx
  • src/ui/components/carousel/carousel.tsx
  • src/ui/components/carousel/use-carousel-controller.ts
  • src/lib/cn.ts

Install runtime dependencies used by this component:

  • framer-motion
  • next / react
  • embla-carousel-react

If your project already has TaylorUI carousel primitives, you usually only need to copy project-carousel.tsx and its slide data shape.

import { placeholderProjectList } from '@/assets';
import { ProjectCarousel } from '@/ui/components/carousel/project-carousel';
 
<ProjectCarousel
  title="Selected works"
  backgroundColor="black"
  slides={placeholderProjectList}
/>

To customise slide content, map your data to the ProjectCarouselSlideData type from @/assets:

import type { ProjectCarouselSlideData } from '@/assets';
 
const slides: ProjectCarouselSlideData[] = items.map((item) => ({
  altText: item.title,
  heading: item.title,
  year: item.year,
  description: item.description,
  image: item.image,
}));