Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/artisan-developer/llms.txt

Use this file to discover all available pages before exploring further.

FabricStripTimeline converts vertical scroll progress into horizontal movement so that work history entries glide sideways across a fabric-strip background as the user scrolls down the page. The mechanic is purely CSS and Framer Motion — no JavaScript scroll listeners, no manual calculations — which keeps it smooth even on lower-end devices.

​
Demo data

The component ships with four default timeline entries that represent a fictional but complete work history: 
const timeline = [
  {
    year: '2023 - Present',
    role: 'Senior Frontend Artisan',
    company: 'Chroma Corp',
    desc: 'Leading the UI architecture for next-gen creative tools.',
  },
  {
    year: '2021 - 2023',
    role: 'UI Engineer',
    company: 'DyeHard Tech',
    desc: 'Built the core component library used by 50+ internal teams.',
  },
  {
    year: '2019 - 2021',
    role: 'Web Developer',
    company: 'Splash Digital',
    desc: 'Crafted bespoke marketing sites with heavy WebGL and animations.',
  },
  {
    year: '2017 - 2019',
    role: 'Junior Dev',
    company: 'Pigment Agency',
    desc: 'Cut my teeth writing vanilla JS and wrestling with CSS floats.',
  },
];
Each object uses the shape { year, role, company, desc }. Replace the demo data with real work history by editing this array directly in components/FabricStripTimeline.js.

​
Scroll mechanics

The section is taller than the screen so the browser has room to scroll while the content appears stationary:
ElementKey style
Outer <section>h-[300vh] — creates 3× viewport height of scrollable space
Inner wrapperposition: sticky; top: 0; height: 100vh — pins content to the top while the page scrolls
Strip motion.divx motion value drives horizontal translation
Framer Motion’s useScroll hook is attached to the outer section via a ref. It tracks scrollYProgress from 0 (section enters viewport) to 1 (section exits viewport). This progress value is piped through useTransform to map [0, 1] → ['0%', '-75%'], which becomes the x style on the strip container. As the user scrolls down, the strip moves left. At the bottom of the sticky wrapper a “Scroll to unravel” hint with a bouncing downward arrow is shown to signal to visitors that scrolling down advances the timeline.

​
Entry card layout

Each timeline entry renders as a flex column with three sub-elements:
  1. Timeline node — a 64×64 px circle (w-16 h-16) with a cream background, border-4 border-teal-400, and a smaller spinning tie-dye circle inside (animate-spin-slow).
  2. Connector line — a 1 px tall bg-teal-200 bar anchored at left-full with w-[60vw] width, connecting each node to the next. The line is omitted on the last entry.
  3. Content card — a bg-cream/95 backdrop-blur-sm rounded card containing the year (.font-hand, magenta), role (.font-display, text-3xl), company (text-teal-600), and description (text-teal-800). The card lifts -translate-y-2 on hover.
Each entry column is w-[60vw] on mobile and w-[40vw] on md: breakpoints and above, ensuring entries fill the screen width on small devices while showing more whitespace on large displays.

​
Customizing entries

To update the timeline with real work history, edit the timeline data array in components/FabricStripTimeline.js. Add or remove objects following the { year, role, company, desc } shape: 
// Add a new entry
{
  year: '2015 - 2017',
  role: 'Design Intern',
  company: 'Studio Cerulean',
  desc: 'Assisted with brand identity projects and motion graphics.',
},
The component renders all entries in the array automatically. Adding entries increases the total strip width, so you may also want to adjust the useTransform output range (currently '-75%') to ensure the last entry scrolls fully into view. A rough guide: for n entries, set the end value to approximately -(n - 1) * 100 / n percent.
The scroll-to-horizontal effect requires sufficient page height above and below the section. If the timeline section appears too short or the strip does not travel the full distance, ensure the parent page has enough content both above and below the <FabricStripTimeline /> usage so the browser can accumulate the full h-[300vh] scroll range before the section exits the viewport.

Build docs developers (and LLMs) love

Get started for freeTalk to us