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.

SoapBubble creates the theme’s characteristic iridescent bubble shapes using the .soap-bubble CSS utility class. The illusion of a real soap bubble surface is built from three cooperating techniques: a radial gradient that shifts from near-opaque cream at the top-left highlight down through translucent cyan, magenta, and teal tones; a set of five layered box shadows that simulate the coloured light refraction seen in real soap films; and a backdrop-filter: blur(2px) that gives the circle a faint glass quality by softening whatever sits behind it. Together these produce a convincing iridescent sphere without any canvas or WebGL code.

​
CSS utility

The visual surface of every bubble is controlled by the .soap-bubble class in assets/main.css: 
.soap-bubble {
  background: radial-gradient(
    150% 150% at 30% 30%,
    #fdfcf9cc, #06b6d433, #d946ef1a,
    #2dd4bf33 60%, #fdfcf966
  );
  box-shadow:
    inset 0 0 20px #fffc,
    inset 10px 0 40px #d946ef4d,
    inset -10px 0 40px #06b6d44d,
    inset 0 -10px 40px #fb923c33,
    0 4px 20px #0000000d;
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
The gradient origin is set at 30% 30% — offset toward the upper-left — to mimic the specular highlight of a sphere lit from above. The box shadow layers break down as follows:
ShadowColourPurpose
inset 0 0 20px #fffcnear-whiteOverall inner brightness, gives the sphere a luminous core
inset 10px 0 40px #d946ef4dmagenta 30%Left-side iridescent colour cast
inset -10px 0 40px #06b6d44dcyan 30%Right-side iridescent colour cast
inset 0 -10px 40px #fb923c33orange 20%Bottom warmth, simulates light bending around the curve
0 4px 20px #0000000dblack 5%Subtle drop shadow to ground the sphere on the page
A thin 1px solid rgba(255, 255, 255, 0.5) border traces the rim and adds a crisp edge highlight. The component also renders a static div positioned at top: 4, left: 8 with w-1/3 h-1/4 bg-white/40 rounded-full blur-md rotate-[-45deg] — a blurred ellipse that acts as a fixed specular glint, ensuring the sphere reads as three-dimensional even without lighting calculations.

​
Animation

Soap bubble elements combine two CSS animations from assets/main.css: .animate-wobble — morphs the border-radius between elliptical shapes on an 8-second ease-in-out loop, making the bubble feel like it is slowly changing shape under surface tension: 
@keyframes wobble {
  0%, 100% { border-radius: 50%; }
  33%       { border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%; }
  66%       { border-radius: 45% 55% / 55% 45% 50% 50%; }
}
.animate-wobble {
  animation: wobble 8s ease-in-out infinite;
}
.animate-float — vertically translates the bubble with a slight rotation oscillation on a 6-second ease-in-out loop, producing a drifting, weightless quality: 
@keyframes float {
  0%, 100% { transform: translateY(0)    rotate(0deg);  }
  25%       { transform: translateY(-10px) rotate(2deg);  }
  50%       { transform: translateY(-15px) rotate(-1deg); }
  75%       { transform: translateY(-5px)  rotate(1deg);  }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}
The combination of the two animations on the same element creates a compound motion — the bubble drifts upward and downward while simultaneously morphing its outline — that closely resembles the behaviour of a real soap bubble in still air. Additionally, SoapBubble uses Framer Motion for its scroll-entry reveal: each bubble starts at y: 100, opacity: 0 and animates to its floating position once the page loads, with opacity transitioning in over 1 second. The stagger is controlled by the delay prop passed from the parent page. On hover, SoapBubble scales up to 1.05 and suspends the wobble animation via group-hover:animate-none, allowing the visitor to read the quote text revealed inside.

​
Usage context

SoapBubble is used on the testimonials page as a creative alternative to traditional quote cards. Each bubble contains a client quote, attribution name, and role. The text is hidden at rest (opacity 0) and revealed on hover (opacity 100), turning the bubble into a reveal interaction. Bubbles are sized using a size prop that maps to Tailwind width/height classes: sm (64 × 64), md (80 × 80), and lg (96 × 96). They are positioned using Framer Motion’s x and y offsets to scatter them naturally across the hero area, and they do not participate in document flow.
The backdrop-filter: blur(2px) property applies a subtle blur to any content that lies directly behind the bubble. This is intentional — it contributes to the glass-like appearance. However, if a SoapBubble is placed directly over a block of body text, the blur will reduce that text’s readability. Keep bubbles positioned over decorative backgrounds or open space rather than over prose content.

Build docs developers (and LLMs) love

Get started for freeTalk to us