M
Component Library
Version

MyCamgirl-DS

Design system tokens, primitives and components. Modern, confident, timeless — built with Plus Jakarta Sans + Red Hat Text, purple-pink brand palette, and warm purple-tinted shadows.

Color Palette

@for (group of paletteGroups; track group.label) {

{{ group.label }}

@for (s of group.swatches; track s.name) {
{{ s.name }} {{ s.hex }}
}
}

Typography

Plus Jakarta Sans 500–700 · Red Hat Text 400–700

H1 / 2rem / 600

Database & Reviews

H2 / 1.5rem / 600

Trending Models

H3 / 1.25rem / 600

Profile Details

Body / 15px / 400The quick brown fox jumps over the lazy dog.
Secondary / 14pxSecondary caption text for metadata and timestamps.
Caption / 12pxCaption and footnote text
LinkLink style →

Shadows & Elevation

@for (s of shadowSpecs; track s.label) {
{{ s.label }}
}

Border Radius

@for (r of radiusSpecs; track r.label) {
{{ r.label }}
}

Spacing Scale

@for (sp of spacingSpecs; track sp) {
{{ sp }}px
}

Dividers — All Variants

Standard — 1px in border-gray (#E0E0E0)

Subtle — 1px in primary-wash (#EDE6FA) · for use within cards

Card content above divider

Card content between subtle dividers

Card content below labeled subtle divider

Comparison: Standard vs. Subtle in context

Standard Divider

Stronger visual separation for layout-level breaks, between sections.

Labeled variant with centered text.

Subtle Divider

Whisper-light rule for card-internal grouping that doesn't compete.

Labeled subtle for form field separators.

Buttons

Tabs

Underline (primary)

Underline (accent, with icons)

Pill

Pill (with icons & counts)

Filter (compact, no container)

Standard

Truncated (maxVisible=4)

With home icon (forum style)

Pagination

Full pagination with counter

Compact variant

(Rendered inline — in production this would be sticky at the top of the page)

Full menu — sections, icons, selected state, destructive action

User Menu Dropdown

Trigger: avatar + name + chevron. Header: avatar 48px + name + role. Divider before Sign Out.

Default (initials)
Compact (no role)

Accordion / Collapsible

Single-open (default)

Multi-open

Form Controls

Searchable Select

{{ o.label }} @if (o.meta) {{{ o.meta }}} {{ o.label }} @if (o.meta) {{{ o.meta }}}

Date Picker

Single date

With disabled dates

Range variant — click start, then end

Disabled state

Search Autocomplete

With model + forum results (type to search)

Click the field to see recent searches. Type anything for live results. Keyboard ↑↓ to highlight, Enter to select.

No-results state (type something obscure)

Tag Input

With suggestions autocomplete

With max tag limit

Error state — empty tags

Free-form — no suggestions

Rich Text Editor

Default state — collapsed toolbar

Expanded toolbar (Row 2 open) with pre-filled content

Image Upload with Crop

Upload zone — empty state

Upload zone — optional field

Click "Add photo" → select any image file → interact with the crop modal: drag the circle overlay to reposition, scroll to resize, preview updates in real-time.

File Upload Zone

Photo upload — with progress simulation

Video upload — optional, single file

Generic file upload — any type

Repeating Field Group

Default — name + category + status + type fields, labels on first row only

Fresh — single empty row, ready for input

Word Count Tier Indicator

Live demo — drag slider

Restricted — 18 words

Basic tier — 72 words

Standard tier — 145 words

Expert tier — 420 words

Profile Selector

With sub-dropdown populated per selection

Without sub-dropdown — simple selector

Badges & Status

Unified hybrid style: slightly rounded corners, subtle gloss, tonal palette. Status badges use a pulsing dot — never combined with icons. Add filled for gradient emphasis (premium, LIVE).

Standard

Default Verified Pending Banned Review Featured Draft Premium Editor's Pick

Category Pills

Review Question Model News

Status Indicators (pulsing dot, no icons)

Thread Status (with icons)

Filled (gradient — for emphasis moments, ~3/page max)

Premium Featured Live Verified Pro

Rank

Avatars

Chips

Default

Blonde Brunette Tattoos Piercing Clickable

Accent Variant

Free Premium VIP Exclusive

Tag Variant (bordered, with optional emoji)

Cosplay Music ASMR Dance Gaming

Category Pills & Rank Badges

Category Pills — 8 variants · 10px / 600 / uppercase / 3px 8px / 2px radius

@for (v of pillVariants; track v) { }

Pills in context — discussion list item headers

@for (r of pillRows; track r.title; let i = $index) {
{{ r.title }} 2h ago
}

Rank Badges — Top 100 (gold) · Top 1000 (purple)

@for (r of rankDemo; track r) {
rank={{ r }}
}

Spec tokens

🏆 Top 100 · gold bg 🏆 Top 1000 · purple bg

Camsite Icons

Duotone hexagons with rounded corners. Subtle gradient from brand color to 18% darkened bottom. Each icon uses the platform's actual brand colors.

All Icons — 48px

@for (icon of camsiteIcons; track icon.id) {
{{ icon.name }}
}

Legacy-Name Aliases

Former site names still surfaced in content resolve to the parent brand's colors with their own glyph. Lookups are case- and spacing-insensitive ("chat 49", "Chat49", "Chat 49").

@for (a of camsiteAliases; track a.aliasName) {
{{ a.aliasName }} → {{ a.parentName }}
}

Multiple Platforms — 32px

@for (id of camsite32; track id) { }

Inline Badge Usage

@for (id of camsiteInline; track id) { }

Color Reference

@for (icon of camsiteIcons; track icon.id) { }
AbbrNameBackgroundText
{{ icon.abbr }}
 {{ icon.name }}
{{ icon.c1 }} → {{ icon.c2 }}
{{ icon.c3 }}

Sizes — 16 / 24 / 32 / 48 / 64px

@for (s of camsiteSizes; track s) {
{{ s }}px
}

Data Table

Default with selection & sorting

{{ row.initials }} {{ row.name }}
{{ row.rating }}

Compact with zebra striping

selected: {{ tableSelected().size }}

Stats Summary Row

Stats Summary Bar

Stat Cell

Quick Stats Row

Details Grid

Heart Rating

Step Indicator

Horizontal on desktop, vertical on mobile. Three states: completed (accent + checkmark), active (primary fill), upcoming (border only).

Activity Timeline

Full variant — profile activity feed

Compact variant — sidebar panel

Recent Activity

Highcharts Theme — Chart Palette & Sample Charts

Cards

Default

Subtle border, no shadow. Clean baseline for content areas.

Elevated

Purple-tinted shadow for focused content.

Featured

Deep purple shadow — hero cards and modals only.

Dashed

Dashed border for info/FAQ blocks.

Section Header

Account Card (Nickname-First)

Bio Card

Review Card

Horizontal variant — listing page layout

Vertical variant — grid layout

User-Generated Review Card

Full variant — with title, excerpt, subject, platform badge

Image-led variant — for /user-reviews feed grids (hero image up top, author demoted to attribution footer)

Compact variant — single row, no excerpt (for activity feeds or sidebars)

Review Callouts

The virgin framing accomplishes what it needs to: it makes every session feel like a transgression rather than a transaction.

Across the last twelve months I've tested three others who pull the same trick — most recently KattyNilson, whose marketing is almost identical but whose private chat is noticeably shorter and more defensive. The distinction comes down to pacing.

Blog Post Card

Featured Card (Promoted Content)

Directory Card

The generic DirectoryCard is not ported (unused by Angular pages); McgCamsiteDirectoryCard + BrowseRow below are the directory family the camsite index uses.

Story Cards

Stories Strip

9:14 preview cards with a top image zone and a bottom meta footer (model name + platform). Optional LIVE badge top-left, story-count pill top-right, centered lock icon when isLocked is true. Cards share the container width evenly — no horizontal scroll.

Angular-only extra (not in the React showcase): click a card (or a button below) to open the full-screen mcg-story-viewer — Esc / ← → / backdrop close.

Discussion List Item

Info Block (Dashed)

How does ranking work? Models are ranked based on a combination of viewer ratings, activity consistency, and content quality as assessed by our editorial team. Tip: Performers who maintain at least 20 hours per week of stream time and respond to reviews tend to rank significantly higher.

Code Block

Monospace block for code snippets. Use <InlineCode> for short fragments in prose and <CodeBlock> for multi-line code. JetBrains Mono throughout. Optional header with filename, language pill, and copy button.

Inline (in prose)

Install the package with npm install mcg-ds, then import a component like <Button variant="accent"> into your file. You can also reference CSS tokens like --mc-primary directly.

Plain block

With language pill

Full header — filename, language, copy button

Long line — scrolls horizontally

Rules Cards

Numbered rules in 2-column grid with accent badge.

FAQ Card Grid

Standalone FAQ cards with truncated answers and expand toggle. Different from accordion.

Alerts

Standard

Your performer profile has been verified successfully. Your latest submission is under editorial review. The image exceeds the maximum file size of 10MB. You can now add video previews to your profile.

Dismissible with action link

Your identity has been confirmed. You now have access to all community features. Add a profile photo and bio to improve your visibility in the community. We couldn't process your subscription. Please update your payment method. The platform will undergo maintenance on March 28 from 2:00–4:00 AM UTC.

Compact (inline validation)

Username must be between 3 and 20 characters. This username is available but similar to an existing account. Email verified successfully. Autosave is enabled for this form.

Four modal variants: confirmation (480px), content (640px), full-width (800px), and destructive.

Your review will be visible to all users and submitted to the editorial queue for featuring consideration.

Welcome to our community. Please read and understand the following guidelines before participating in discussions, reviews, and ratings.

1. Respectful Communication

Treat all community members and performers with respect. Harassment, hate speech, and personal attacks will result in immediate account suspension.

2. Honest Reviews

Reviews should reflect genuine experiences. Do not post fake reviews, paid promotions disguised as organic reviews, or reviews for performers you haven't interacted with.

3. Privacy

Never share performers' personal information, real names, or identifying details without their explicit consent. Respect boundaries at all times.

4. Content Standards

All user-generated content must comply with applicable laws. Do not post or link to pirated content, unauthorized recordings, or any content involving minors.

5. Account Responsibility

You are responsible for all activity on your account. Do not share login credentials or create multiple accounts to circumvent bans or manipulate ratings.

Rating

Step 1 of 3

This action cannot be undone. All your reviews, ratings, and profile data will be permanently removed.

Toast Notifications

Click a button to spawn a live toast. Each variant uses semantic colors with auto-dismiss progress bar.

Rich Tooltips

AmberRose_Live

Online now on Chaturbate. 4.8 avg rating across 247 reviews.

Keyboard Shortcut

Ctrl+K to open search

Dark Variant (icon hints)

Light Variant (rich content)

Notification Badge

Dot-only variant (accent & urgent)

Dot / accent
Dot / urgent
AR On avatar

Numbered pill (1–99+)

count=1
count=5
count=12
count=42
count=99
count=100

On nav items

Loading Spinners

Sizes

16px — inline
32px — card
48px — page

Button loading state

Shimmer Skeleton Loaders

Animated skeleton loaders with shimmer sweep (#E4DEF1 → #F9F6FF) for content placeholders.

Model Card Skeleton

Account Card Skeleton

List Item Skeleton

Table Row Skeleton

Empty States

(An mcg-schema Organization JSON-LD block is mounted on this page — inspect <script type="application/ld+json"> in devtools.)

Progress Bars

Profile completion

Upload progress (accent)

Verification (success)

Small variant

Indeterminate (loading)

Hero Image Banner

With title, subtitle, and tag pills

Image only — no overlay text

Flush edge (radius 0) — as it would appear at the top of a page

CTA Hero Section

Sticky Table of Contents

Article Body Prose

All block types rendered: H2, H3, paragraph, bold, italic, inline link, blockquote, bullet list, numbered list, pull quote, horizontal rule, and image with caption.

Tracking a performer across platforms starts with one question: what is each number actually counting?

Understanding Platform Metrics: A Complete Guide

Tracking a performer's engagement across multiple platforms requires a clear understanding of what each metric actually measures. Average viewer count and concurrent peak sessions are often conflated — yet they tell very different stories. For a deeper breakdown, see our Platform Analytics Handbook.

"The difference between a performer with 500 average viewers and one with 500 peak viewers can be the difference between a stable career and a viral moment that fades within a week."

What Counts as an Engaged Viewer?

Platforms define engagement differently. Chaturbate counts any browser session lasting over 10 seconds, while StripChat requires at least one interactive event — a tip, a message, or a token spend — before logging a viewer as active. This means raw viewer counts between platforms are not directly comparable.

  • Chaturbate: session-based, passive viewers counted
  • StripChat: interaction-weighted engagement model
  • LiveJasmin: credit-spend triggers active status
  • Cam4: hybrid model, resets every 5 minutes

Reading the Trend Lines

A single snapshot of viewer count means very little without historical context. Our database tracks rolling 30-day averages alongside session peaks, giving a more reliable signal for community members evaluating a performer's trajectory. When a profile shows a rising trend over three consecutive months, that is a strong indicator of genuine audience growth — not an algorithm spike.

  1. Open the performer's profile and navigate to the Analytics tab
  2. Select Last 90 days from the date range picker
  3. Compare Average and Peak trend lines side by side
  4. Cross-reference with our Community Rating score

"Consistent engagement, even at modest scale, is more valuable than a single viral session that burns out its audience in a weekend."

Interpreting Seasonal Patterns

Traffic across all major platforms follows predictable seasonal patterns. Q4 (October–December) consistently shows 18–24% higher average viewer counts compared to Q2 lows. Performers who maintain their streaming schedule through the summer — even at reduced hours — tend to recover their peak numbers faster in the autumn ramp-up.

Platform analytics trend chart
Rolling 30-day average viewer counts across four platforms, Q1 2026.

Video Player Embed

Collapsible filter groups with active state highlighting. 240px fixed width for sidebar use.

Content area

agreed: {{ legalAgreed() }}

Thread List

Thread list with unread/read/pinned/locked states, prefix tags, reply counts, and last reply info.

Category / Node List

Forum category tree with groups, subcategories, thread/post counts, and last post info.

Quote Block

Quote with attribution. Supports nesting up to 2 levels.

Has anyone tried the new private show pricing? It seems like they've raised the minimum rate again. Has anyone tried the new private show pricing?

Yes, they raised it last month. Some adjusted their rates but most kept the old structure.

Post Action Bar

Reply, Quote, Like (with count and reaction picker on hover), Bookmark, Report.

Default

Liked + Bookmarked

Reaction Picker

Hover popover for the Like button. Scale-up on hover.

Forum Post (Full Layout)

Two-column: user sidebar (desktop) + post content. Header, body, quote, and action bar.

Has anyone tried the new private show pricing? It seems like they've raised the minimum rate again. I noticed it yesterday when browsing some of my usual profiles.

The quality is still top-notch but the pricing is getting harder to justify for longer sessions.

 Has anyone tried the new private show pricing? It seems like they've raised the minimum rate again.

Yes, they raised it last month. Some adjusted their rates but most kept the old structure. Personally I've shifted more towards Streamate for longer sessions.

User Info Card

Card variant (hover popover) and inline variant (member list row).

Inline variant (member list)

Post Editor Toolbar

Two-row toolbar: standard formatting + forum extras (quote, spoiler, code, media, poll, mention). Preview toggle, attachment upload, submit buttons.

View Toggle

mode: {{ viewMode() }}

Filter Toggle

Sort Indicator

Account List Header + Rows

Account Grouped List

Login Form

Standalone card

Modal wrapper — click button to open

Register Form

Standalone card — with live password strength meter

Modal wrapper — click button to open

Contact Form

Name + email side by side, subject dropdown, message textarea. Includes success state.

Page Previews

Full standalone pages that compose multiple components together. Each opens in its own tab.

Muted cards exist only in the React DS export — not composed as Angular routes yet.

@for (group of previewGroups; track group.title) {

{{ group.title }}

@for (p of group.pages; track p.title) { @if (p.href) { {{ p.title }} {{ p.description }} } @else {
{{ p.title }} React-only {{ p.description }}
} }
}
MyCamgirl-DS v3.4 · Angular port · 180 components · Dark Mode · {{ year }}

Angular appendix — page composites

Inline demos for components that, in the React DS, only appear inside full page previews (their pages aren't composed as Angular routes yet). Not part of the React docs page structure.

Static-page layouts (full routes)

/dmca — full layout + DmcaForm /request-for-removal — RuleBlocks + HelperCamsiteList + TOC /2257 — PlatformLinkGrid /contacts — ContactMethodGrid /privacy-policy /copyright

ReviewHero

VerdictCard · ReviewVerdictBand

ProsConsList

Her style drew obvious comparisons to Angel and Luna, but the consistency was entirely her own.

ReviewFAQ

PlatformNicknameList · TrustFramework

UserProfileHero

UserStatsStrip

ForumCrossLinkStrip

UserProfileReviewCard

MembershipReadout

SecurityRow · SaveBar

AvatarUploader

ChangePasswordModal

Atoms — AuthSiteLogo · GoogleAuthButton · DsDivider · AuthStatBar

AuthField · AuthPwField · PasswordStrengthMeter

AuthFeaturedPanel

Full-page routes — LoginPage · RegisterPage · ForgotPasswordPage · ForgotPasswordSuccess

The four auth pages are full-viewport (100dvh) split layouts, so they render as real routes — like the React DS's standalone login.html / register.html pages:

/login /register /forgot-password /forgot-password/success

SiteNav — logged-in variant (inline, non-sticky)

Hover Reviews / Camsites for the fly-outs. Mail/Bell counts + UserMenu in the auth slot.

SiteLayout — full page shell · composed page demo

/site — SiteNav + content + SiteFooter /camsite/chaturbate — full composed data-hub page

ModelGridCard (1:1 index grid)

TopModelGrid (camsite detail)

BlogIndexHeader · CategoryFilterRow

StatGrid · BlogIndexSeoFooter

CamsiteVerdictBadge

CamsiteHero (full /camsite/[slug] hero)

DirectoryIndexHeader (camsite directory masthead)

ContactMethodGrid (slot)

HelperCamsiteList (slot)

PlatformLinkGrid (slot)

DmcaForm (slot)

WizardRail

Angular appendix — ui/ shadcn primitives

The 39 ui/ primitives ported from the React ui/ layer (Radix/shadcn equivalents rebuilt on Angular CDK). The React docs app doesn't document this layer — kept here because the ds/ components compose them.

Button — ui/ shadcn primitive ([mcgButton], intentionally different)

@for (v of variants; track v) { }
@for (s of sizes; track s) { }

Badge

@for (b of badges; track b) { {{ b }} }

Input & Textarea

Checkbox & Switch

I agree to the terms

Avatar, Progress, Skeleton

MC

Alert

Heads up Your changes are saved automatically. Verification failed Re-upload the requested document.

Tooltip · Dialog · Popover (CDK overlays)

Edit profile Make changes to your profile, then save.

Dropdown menu & Select

Tabs · Accordion · Radio group

Manage your account details here. Change your password here. Yes — reviewed by the team before publishing. Automated and manual checks. Free Pro Enterprise

Breadcrumb

Home Models Posh

Toggle · Toggle group · Collapsible · Sheet

Revealed content.

Filters

Refine the model list.

Pagination

Slider · Aspect ratio · Scroll area

Chaturbate

LiveJasmin

StripChat

MyFreeCams

BongaCams

Flirt4Free

Alert dialog · Hover card · Context menu

Delete this model?

This cannot be undone.

 @posh

Retired Ukrainian camgirl, active 2009–2011.

 Hover @posh
Right-click me

Table · Form field · Input OTP

ModelCam siteReviews
PoshLiveJasmin42
AngelChaturbate17
Please enter a valid email.

Menubar · Drawer · Toast

Quick actions

Card

Model profile CWSW · LiveJasmin Verified performer with an active review history.