PaintTube is a themed decorative element that contributes directly to the artisan visual identity of the portfolio. Rather than using abstract geometric shapes as accents, the theme borrows from the physical world of paint and craft, and PaintTube is one of the primary vehicles for that metaphor. The component is purely visual and does not affect navigation, content layout, or accessibility — it contributes atmosphere and reinforces the hand-crafted character of the theme without demanding attention from visitors.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.
Visual role
The component renders a stylised paint tube shape built from layered<div> elements styled to resemble a squeezed artist’s tube. Key structural parts include a rounded tube body, a crimped bottom edge, a nozzle cap, and a label area that displays the skill name rotated 90° in the font-display (Fraunces) typeface.
PaintTube is used specifically on the skills page, where one tube is rendered per skill entry. Each tube receives a color prop (one of the eight theme accent hex values) that tints the tube body and label background. A Framer Motion whileInView animation slides each tube upward from y: 50 to y: 0 as it enters the viewport, and a drip particle animates downward from the nozzle tip — a looping motion.div that fades from opacity 0 → 1 → 0 while scaling down, simulating paint dripping.
The tube also renders a proficiency bar: an inner motion.div that animates its height from 0 to ${proficiency}% on scroll entry, giving a visual read of skill level inside the tube body itself.
Positioning
Like all decorative and illustrative elements in the theme, PaintTube is positioned within a flex layout on the skills page rather than absolutely. Each tube sits inside aflex flex-col items-center group that also holds its label. The group applies group-hover:-translate-y-2 so that hovering the entire tube group lifts it slightly, making the collection feel interactive and three-dimensional.
pointer-events: none is not applied here — unlike purely atmospheric decorations such as TieDyeSwirl or SoapBubble, the PaintTube group is interactive and responds to hover events.
Animation
PaintTube uses two Framer Motion animations: Scroll-entry reveal — the outermotion.div uses initial: { opacity: 0, y: 50 } and whileInView: { opacity: 1, y: 0 } with a spring transition and a staggered delay prop, so tubes cascade into view one after another as the visitor scrolls down the skills section.
Proficiency fill — the inner bar motion.div uses initial: { height: 0, opacity: 0 } and whileInView: { height: \$%`, opacity: 1 }with aneaseOut` curve over 1 second, giving the impression that paint is slowly filling the tube to the correct level.
Drip particle — a small rounded motion.div at the nozzle tip loops y: [0, 20, 40] and opacity: [0, 1, 0] with scale: [1, 0.8, 0] on a 2-second repeat, creating a subtle perpetual drip effect.
The theme’s .animate-float and .animate-wobble utilities (used on SoapBubble and TieDyeSwirl) are not applied to PaintTube; its animations are entirely Framer Motion-driven to support the scroll-triggered entrance sequence.