CoreHigh-End Animated Cardsno dependencies

MorphingBorder

Container framed by a traveling conic outline whose perimeter gradient, corner geometry, and orbit velocity morph smoothly with a static-border fallback.

Preview

Traveling Perimeter Outline

Continuous conic beam paired with subtle corner-radius modulation and zero layout thrashing.

Customize

5 props
4.2
14

Installation

Copies the component source and its CSS Module into your project.

npx motionfoundry add morphing-border

Writes components/ui/morphing-border.tsx and components/styles/morphing-border.module.css.

Usage

Updates live as you change the controls — only props that differ from the defaults are included.

example.tsx
1import { MorphingBorder } from "@motionfoundry/ui";2 3export function Example() {4  return (5    <MorphingBorder />6  );7}

Props

PropTypeDefault
title

Heading inside the container.

string'Traveling Perimeter Outline'
subtitle

Supporting description.

string'Continuous conic beam...'
primaryColor

Leading color of the traveling border.

string'#f4f4f6'
secondaryColor

Trailing color of the traveling border.

string'#60a5fa'
speed

Orbit duration in seconds.

number4.2
borderRadius

Base corner radius in pixels.

number14

Accessibility

Uses a purely decorative perimeter layer marked aria-hidden='true' and falls back to a crisp 1px static border under prefers-reduced-motion.

Toggle prefers-reduced-motion in your OS or browser devtools (Rendering → Emulate CSS media feature) to verify the reduced-motion state.

Source

components/ui/morphing-border.tsx
1"use client";2 3import * as React from "react";4import styles from "../styles/morphing-border.module.css";5 6export interface MorphingBorderProps extends React.HTMLAttributes<HTMLDivElement> {7  /** Heading text */8  title?: string;9  /** Supporting copy */10  subtitle?: string;11  /** Primary traveling beam color */12  primaryColor?: string;13  /** Secondary traveling beam color */14  secondaryColor?: string;15  /** Orbit cycle duration in seconds */16  speed?: number;17  /** Corner radius in pixels */18  borderRadius?: number;19  /** Border thickness in pixels */20  borderWidth?: number;21}22 23export function MorphingBorder({24  title = "Traveling Perimeter Outline",25  subtitle = "Continuous conic beam paired with subtle corner-radius modulation and zero layout thrashing.",26  primaryColor = "#f4f4f6",27  secondaryColor = "#60a5fa",28  speed = 4.2,29  borderRadius = 14,30  borderWidth = 1.5,31  children,32  className = "",33  ...rest34}: MorphingBorderProps) {35  const customStyle = {36    "--mf-mb-primary": primaryColor,37    "--mf-mb-secondary": secondaryColor,38    "--mf-mb-speed": `${speed}s`,39    "--mf-mb-radius": `${borderRadius}px`,40    "--mf-mb-width": `${borderWidth}px`,41  } as React.CSSProperties;42 43  return (44    <div style={customStyle} className={`${styles.outer} ${className}`.trim()} {...rest}>45      <div aria-hidden="true" className={styles.travelingBeam} />46      <div className={styles.inner}>47        <h3 className={styles.title}>{title}</h3>48        <p className={styles.subtitle}>{subtitle}</p>49        {children}50      </div>51    </div>52  );53}