Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky/llms.txt

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

SwingingLantern is a decorative element that hangs and sways like a lantern suspended from a hook. It is built entirely with Framer Motion and Tailwind CSS — no external image assets are required. The lantern body, flame flicker, and pendulum swing are all produced with CSS transforms and Framer Motion’s animate prop, giving the decoration a gentle, looping life.
SwingingLantern is mounted inside Layout and is therefore active on every page of the Spooky theme.

​
Animation

The lantern’s swing uses Framer Motion’s animate prop on the lantern body element with a rotate keyframe sequence: 
animate={{ rotate: [-3, 3, -3] }}
transition={{
  repeat: Infinity,
  duration: 3 + Math.random(), // slight variation per mount
  ease: "easeInOut",
}}
The pivot point for the rotation is set to the top of the element via the origin-top Tailwind utility class, which maps to transform-origin: top. This anchors the rotation at the hanging point (the string/chain), producing an authentic pendulum arc rather than spinning around the element’s center. Inside the lantern body, a separate Framer Motion motion.div animates the candle flame. It independently cycles opacity and scale at a fast rate to simulate a flickering glow: 
animate={{
  opacity: [0.6, 1, 0.7, 0.9],
  scale:   [0.9, 1.1, 0.95, 1.05],
}}
transition={{
  repeat: Infinity,
  duration: 0.5 + Math.random(),
  ease: "linear",
}}

​
Placement

SwingingLantern is rendered by the Layout component, making it a fixed-position decoration that appears consistently across all pages. It sits at a defined top/left position in the layout, overlaying the page content without interfering with interaction (it uses pointer-events-none-equivalent positioning in the layout hierarchy). The string above the lantern is rendered as a thin 2px wide div with a gray color, giving the visual impression of a thread or chain from which the lantern hangs.

​
Customizing the lantern

The following properties can be adjusted when rebuilding from source:
PropertyWhere to changeEffect
Swing arcrotate keyframe values (e.g., [-3, 3, -3])Wider values = more dramatic pendulum
Swing speedtransition.duration valueLower = faster swing
PositionCSS top/left values on the wrapper elementMoves the lantern to a different screen position
Flame colorThe bg-[#ff7518] class on the flame divChange to any Tailwind or arbitrary color
Lantern appearanceThe border and background classes on the lantern bodyAdjust size, color, and border style
String lengthThe h-16 class on the vertical line divShorter or longer thread above the lantern
The lantern is also interactive: it responds to hover with a subtle whileHover={{ scale: 1.05 }} spring, inviting visitors to notice it.

Build docs developers (and LLMs) love

Get started for freeTalk to us