myBetterRates
Brand assets for myBetterRates: animated logo mark, favicon, and the MyBetterRates text entity component.
Logo
Animated logo mark. The bar briefly appears through the $ character every 4 seconds,
synchronized with the MyBetterRates text entity animation.
Light Background
<BrandLogo brand="mbr" animate /> Dark Background
<BrandLogo brand="mbr" animate dark /> Favicon
MBR oval logo mark optimized for browser tabs and bookmarks. Static display; the bar through the $ is always visible.
Light Background
Dark Background
Brand Text Component
Branded text component rendering "myBetterRates" with a CSS-only animation synced to the logo.
The terminal s is the permanent resting state — no layout shift or size change ever occurs.
Every 4 seconds, a thin CSS bar briefly appears through the s, making it look like a
lowercase-height $, synchronized with the logo bar-blink. SEO-safe:
aria-label="myBetterRates" ensures screen readers and web crawlers always read the correct brand name.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
entity | string | undefined | Optional entity text appended after "myBetterRates" (e.g., "Advisor", "App") |
class | string | "" | Additional CSS classes to apply to the root span |
Usage
import MyBetterRates from "@smart-debt/components/brand/MyBetterRates.astro";
<MyBetterRates /> // "myBetterRates"
<MyBetterRates entity="Advisor" /> // "myBetterRates Advisor"
<MyBetterRates entity="App" /> // "myBetterRates App"
Animation: Pure CSS keyframes — no JavaScript required.
The s is always visible at full size (no layout shift, no size change).
A thin vertical bar briefly appears through the s at 93.75% of the 4-second cycle
(matching the logo bar-blink), making the terminal character look like a lowercase-height $.
The wordmark and logo animate simultaneously. prefers-reduced-motion is respected: bar stays hidden.
Live Examples
- myBetterRate 1-Minute Challenge
- myBetter "Worth It" Notifications
- myBetter "1-Click" Implementations
- myBetter Money Sprints
- myBetter Money Minutes
$MART DEBT Coach
Brand assets for $MART DEBT Coach: animated logo mark, favicon, and the SmartDebt text entity component.
Logo
Animated SVG logo component that transitions between "SD" and "$D" every 4 seconds, synchronized with the SmartDebt text component. Automatically adapts to the current theme color.
Light Background
Primary color background with white text. Gold accent dot stays secondary color. Animation cycles S ↔ $D.
<BrandLogo brand="sd" variant="leafDot" animate /> Dark Background
Inverted colors: white leaf, primary color text. Gold accent dot stays secondary.
<BrandLogo brand="sd" variant="leafDot" animate dark /> Favicon
SD leaf-dot logo variant optimized for browser tabs and bookmarks. Static display.
Light Background
Dark Background
Brand Text Component
Branded text component where "SMART DEBT" animates with S ⟷ $ transformation. All instances cycle together every 4 seconds. SEO-preserved — the HTML always contains "SMART DEBT" plus optional entity text.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
entity | string | undefined | Optional entity text appended after "SMART DEBT" (e.g., "Coach", "Strategies", "Mission") |
delay | number | random 0-4000ms | Delay in milliseconds before starting the animation cycle. If not provided, each instance gets a random delay so they start at different times. |
Usage
import SmartDebt from "../components/brand/SmartDebt.astro";
<SmartDebt /> // "SMART DEBT" (random delay 0-4000ms)
<SmartDebt entity="Coach" /> // "SMART DEBT Coach" (random delay)
<SmartDebt entity="Strategies" /> // "SMART DEBT Strategies" (random delay)
<SmartDebt delay={2000} /> // "SMART DEBT" (starts after 2 seconds)
<SmartDebt entity="Plan" delay={0} /> // "SMART DEBT Plan" (starts immediately)
Implementation: Vanilla JavaScript Web Component (smart-debt-element) —
framework-agnostic, SEO-preserved, accessible.
Client-first
SMART DEBT Coach websiteSMART DEBT App (mini-app)- White paper: mission, win-win-win future
SMART DEBT Myths eBookletSMART DEBT Insights (blog, video, audio)SMART DEBT Academy (Certification courses)- Education and Marketing solutions
SMART DEBT Coaching (training, speaking, consulting)SMART DEBT Wealth (investment and credit products)
Talbot Stevens
Brand assets for Talbot Stevens personal brand sites.
Logo
Light Background
Blue circle with white "TS" text. Uses TS brand blue color.
<BrandLogo brand="ts" /> Dark Background
Inverted: white circle with blue "TS" text.
<BrandLogo brand="ts" dark /> Favicon
Blue circle with white "TS" text. Matches the TS logo design.
Light Background
Dark Background
Header Variants
Customized headers with "Talbot Stevens" branding. The header component supports optional tagline and background color customization.