Inline `<mark>` atom for annotated text fragments

Reusable Apple logo SVG atom

Navigation arrow atom for prev/next article links

Animated aurora borealis glow with drifting gradient blobs

Circular user avatar with image, initials fallback, and optional status indicator

Small label atom for tags, versions, and status indicators

Elements fade in from a blurred state when scrolled into view

Animated beam of light tracing an element border

Visual breadcrumb navigation for blog posts

Primary interactive atom supporting link and button semantics

Themed checkbox atom with label support and animated check indicator

Reusable 3D cube-rotate icon swap atom

Horizontal or vertical separator with optional label text

Renders a component dynamically from a module reference

Visual indicator showing how often an article

Animated plus/cross icon for FAQ accordion toggle

Animated Lordicon icon atom for the features grid

SVG flame icon atom for streak displays

Pulsing concentric radial-gradient glow behind slotted content

SVG-based tiling grid or dot pattern background

Semantic heading atom with consistent typography scale

Inline Apple logo SVG atom for the hero heading

Form text input atom with label, helper text, and error state support

Keyboard key indicator styled to resemble a physical keycap

Brand logo atom for Red Opositor

An element that moves toward the cursor when hovering, creating a magnetic pull effect

Reusable navigation link atom for the Header

Animated number that counts up from 0 to a target value

Canvas-based floating particle background effect

Determinate horizontal progress indicator with optional label

Interactive option button atom for quiz questions

Progress indicator atom for quiz sessions

Countdown timer atom for exam mode

Themed radio button atom with label support and animated dot indicator

Button with material-design-style ripple effect on click

RSS feed link atom with an icon and label

A thin progress bar indicating page scroll position

Dropdown select atom with label, helper text, and error state support

Animated shining border effect using a rotating conic-gradient

Animated placeholder for loading states with a shimmer sweep effect

Clickable social media icon atom

Dropdown button to select playback speed

Cursor-following radial gradient that illuminates content on hover

Paragraph atom with variant and size options

Multi-line text input atom with label, helper text, and error state support

Text that appears word by word with a fade-up animation effect

Text that scrambles through random characters before resolving to the final string

Text with an animated shimmer/shine sweep effect

Themed toggle/switch atom with label support and smooth slide animation

Contextual hint that appears on hover/focus via CSS-only positioning

Typewriter effect that types text character by character with a blinking cursor

Volume slider with mute toggle button

Decorative gradient-text watermark atom

Expandable content sections with smooth height animation

Status message banner with variant-specific accent colors

Small legend/key showing what each annotation color means

Contextual annotation card shown when a highlight is clicked

A list item molecule for article listings

Compact sidebar card showing article metadata:

Displays a single badge, earned (full color) or locked (gray + lock icon)

Toast container for newly earned badge notifications

Molecule for displaying a blog post preview in the list

Randomly alternates between two conversion paths:

Navigation breadcrumb trail molecule

Generic content card with multiple visual variants

Toast notification shown when an episode reaches 100% completion

Canvas-based celebration burst with physics simulation

Client-side search molecule for finding articles

WhatsApp contact widget with always-visible icon button

Minimal, non-invasive cookie consent banner

Split button to copy/share article content

Open in ChatGPT

Open in ChatGPT Open in Claude Open in Perplexity Open in Gemini

Copy Copy as Markdown View as Markdown

Premium slide-in panel with cinematic entrance and accent details

Textarea with debounced autosave for episode-specific notes

Card showing episode info with progress bar and optional favorite toggle

Full-screen overlay audio player, Spotify-inspired

Accordion item molecule for FAQ pages

Molecule combining a FeatureIcon with a title

Interactive card molecule with flip animation

Flashcard session resume row for PersistentBottomBar

Call-to-action molecule placed above the footer

Displays form submission feedback (success/error/idle)

Premium 3D CSS gift card molecule with mouse-tracking tilt

Hero call-to-action molecule with download and purchase buttons

Compact inline CTA molecule for blog posts

Authentication form molecule with email/password and magic link tabs

Infinite horizontal scrolling content band with a premium feel

Inline mini audio player content row (no fixed positioning, no backdrop)

Premium dialog overlay with cinematic open/close animations

Email newsletter signup form for blog pages

Side panel showing the upcoming episode queue

Interactive audio player molecule for the hero section

Circular SVG progress indicator

Displays a single quiz question with options

Displays final quiz results with score and breakdown

Quiz session resume row for PersistentBottomBar

Molecule that displays blog posts related to a

Molecule rendering a row of SocialIcon atoms

Fixed bottom CTA bar for mobile devices

Displays the current study streak with fire icon

GitHub-style contribution graph showing study activity

Renders h2/h3 headings as a nested list with anchor links

Premium tabbed content switcher with floating pill indicator

A 3D card that follows the cursor with tilt, glare, and shadow depth effects

Decorative lock screen mockup molecule

Core organism that renders an article's apartados

Mobile bottom navigation for the authenticated app

Desktop sidebar navigation for authenticated app

Sticky sidebar organism for article pages

FAQ accordion organism for article pages

Prev/next navigation organism between articles

Grid of all badges organized by category, showing earned/total per category

Footer organism for blog-related pages

Minimalist feature comparison table

Fixed bottom navigation bar for mobile Constitution portal

Lateral sidebar navigation organism for Constitution article pages

Collapsible tree organism showing the full

Full-width call-to-action banner with gradient background,

Displays days until exam with color-coded urgency

Organism displaying a grid of animated feature cards

Interactive flashcards player with Leitner SRS

Site footer organism containing the purchase CTA,

Fixed site header organism with logo and nav

Primary landing organism with headline, CTA buttons,

Organism showcasing the podcast hosts/creators

Cinematic scrolling logo cloud with dual-row marquee

Organism displaying 4 science-backed pillars

Unified fixed bottom bar combining audio mini-player

Minimalist pricing organism with clean card layout

Centered minimal pricing with hero price

Grid showing overall episode progress with ring and per-title bars

Continue listening and next episode quick links

CTA conversion organism linking quiz to podcast

Displays the user's quiz result history and per-titulo accuracy

Main quiz mode selector organism for /test page

Interactive quiz player organism

Animated statistics organism with NumberTicker counters

Displays streak counter and study activity calendar

Shows today's recommended episodes, plan status, and inline config

Organism displaying the full podcast temario as an interactive

Auto-scrolling testimonial cards in a marquee layout

Overview organism for a single titulo page

Card showing weekly progress: minutes listened, episodes completed, streak