Text & Media Content

Display dynamic text, images, videos, and formatted dates in your infographic slides.

When to Use These

Perfect for:

Long descriptions and testimonials
Product images and logos
Video demonstrations
Customer profile pictures
Event dates and milestones
Dynamic media content
Personalized visual elements

Text Display

Scrolling Text

`lc_scrolltext_*`

Automatically scroll text when content exceeds the container dimensions. Perfect for displaying long descriptions, testimonials, or variable-length content.

Element Setup:

Element type: <rect>
ID format: lc_scrolltext_* (e.g., lc_scrolltext_description, lc_scrolltext_testimonial)

Input Format:

"This is a long text that will automatically scroll if it exceeds the container dimensions"

Behavior:

Scrolling applies only when text exceeds container size
If text fits, displays normally without scrolling
Smooth animation for better readability

Usage Example:

<!-- In your SVG -->
<rect id="lc_scrolltext_description" width="400" height="100" />

<!-- In your dataset -->
{{ description }} = "This is a lengthy customer testimonial that talks about how amazing the product is and includes many details that might exceed the available space in the container."

Common Use Cases:

Customer testimonials
Product descriptions
Terms and conditions
Project summaries
User feedback

Faded Text

`lc_fadetext_*`

Apply a fade effect at the end of text to indicate content continues beyond visible area. Provides a visual cue for overflow without animation.

Element Setup:

Element type: <rect>
ID format: lc_fadetext_* (e.g., lc_fadetext_summary, lc_fadetext_notes)

Input Format:

"This text will have a fade effect applied at the end to indicate more content"

Behavior:

Fade gradient automatically applied at text end
Provides subtle overflow indication
Static display (no animation)

Usage Example:

<!-- In your SVG -->
<rect id="lc_fadetext_summary" width="400" height="80" />

<!-- In your dataset -->
{{ summary }} = "Executive summary explaining the key points of the quarterly business review and highlighting the major achievements"

Common Use Cases:

Executive summaries
Preview text
Notes and annotations
Abbreviated content
Space-constrained descriptions

Choosing Between Scroll and Fade

Use `lc_scrolltext_*`	Use `lc_fadetext_*`
User needs to read full content	Content is supplementary
Long testimonials	Preview/teaser text
Complete information required	Space is very limited
Dynamic narration	Static presentation

Images and Videos

Dynamic Images

`lc_image_*`

Display uploaded images dynamically from your data source. Perfect for logos, product images, customer photos, or any personalized visual content.

Element Setup:

Element type: <rect>
ID format: lc_image_* (e.g., lc_image_logo, lc_image_profile)

Input Format:

CDN URL:

"https://cdn.example.com/images/customer-logo.png"

Dataset Variable:

Where company-logo contains the image URL

Error Handling: If no image is provided or file type is unsupported, displays:

"No Image"

Usage Example:

<!-- In your SVG -->
<rect id="lc_image_company-logo" width="200" height="200" />
<rect id="lc_image_csm-photo" width="150" height="150" />

<!-- In your dataset -->
{{ company-logo }} = "https://cdn.cast.app/logos/acme-corp.png"
{{ csm-photo }} = "https://cdn.cast.app/team/john-doe.jpg"

Common Use Cases:

Customer/company logos
Product images
Team member photos
Profile pictures
Brand assets
Dynamic graphics

Best Practices:

Optimize images - Use appropriate file sizes
Aspect ratios - Design rect to match expected image ratios
CDN URLs - Use reliable CDN for fast loading
Fallback - Plan for “No Image” display
File formats - Use web-standard formats (PNG, JPG, SVG)

Dynamic Videos

`lc_video_*`

Embed video content with automatic playback and looping. Perfect for product demos, animations, or dynamic visual content.

Element Setup:

Element type: <rect>
ID format: lc_video_* (e.g., lc_video_demo, lc_video_intro)

Input Format:

"https://cdn.example.com/videos/product-demo.mp4"

Video Behavior:

Automatically plays when slide is displayed
Loops continuously
Muted by default
Responsive to container size

Usage Example:

<!-- In your SVG -->
<rect id="lc_video_product-demo" width="640" height="360" />

<!-- In your dataset -->
{{ product-demo }} = "https://cdn.cast.app/videos/demo.mp4"

Common Use Cases:

Product demonstrations
Feature showcases
Animated logos
Process visualizations
Background animations
Tutorial clips

Best Practices:

Keep it short - Videos should be under 30 seconds
Optimize files - Compress videos for fast loading
Loop seamlessly - Ensure smooth loop transitions
No audio required - Videos play muted
Aspect ratio - Match video ratio to rect dimensions
File format - Use MP4 (H.264) for best compatibility

Supported Formats:

MP4 (H.264) - Recommended
WebM
OGG (limited support)

Dates

Formatted Date Display

`lc_date_*`

Display dates in an attractive, formatted calendar style. Perfect for events, milestones, deadlines, or any date-based information.

Element Setup:

Element type: <rect>
ID format: lc_date_* (e.g., lc_date_event, lc_date_deadline)
Minimum recommended size: 200x150px

Input Format:

ISO Date Format:

"YYYY-M[M]-D[D]"

Examples:

"2025-10-13"  → October 13, 2025
"1967-7-11"   → July 11, 1967
"2000-1-1"    → January 1, 2000

Current Date Keywords:

"today"    → Displays current date
"Today"    → Displays current date
"TODAY"    → Displays current date
""         → Empty string also displays current date

Display Format: The date renders as a vertical stack:

WEEKDAY
MONTH
DAY
YEAR

Example output:

Friday
October
13
2025

Invalid Formats: If an invalid date is provided, the original rectangle remains unchanged (no date displayed).

Usage Example:

<!-- In your SVG -->
<rect id="lc_date_meeting" width="200" height="150" fill="#2196F3" />
<rect id="lc_date_launch" width="200" height="150" fill="#4CAF50" />

<!-- In your dataset -->
{{ meeting }} = "2025-11-15"
{{ launch }} = "today"

Result:

First date shows November 15, 2025
Second date shows current date

Common Use Cases:

Event dates and conferences
Meeting schedules
Product launch dates
Contract renewal dates
Project deadlines
Milestone dates
Anniversary dates
Expiration dates

Styling:

Text color inherits from rect’s fill color
Text auto-scales to fit rect dimensions
Font remains readable at minimum size

Best Practices:

Size appropriately - Use at least 200x150px
Readable colors - Ensure sufficient contrast
Consistent sizing - Use same dimensions for multiple dates
Valid formats - Always use ISO format (YYYY-M-D)
Test display - Preview with actual dates

Complete Examples

Customer Profile with Media

<!-- In your SVG -->
<rect id="lc_image_profile" x="50" y="50" width="150" height="150" />
<text id="lc_customer-name" x="220" y="80">Customer Name</text>
<rect id="lc_scrolltext_bio" x="220" y="100" width="400" height="100" />

<!-- In your dataset -->
{{ profile }} = "https://cdn.cast.app/images/jane-smith.jpg"
{{ customer-name }} = "Jane Smith"
{{ bio }} = "Jane is a Product Manager with 10 years of experience in SaaS companies. She specializes in user experience and has led multiple successful product launches."

Event Announcement

<!-- In your SVG -->
<rect id="lc_date_event" width="200" height="150" fill="#1E88E5" />
<text id="lc_event-name" x="250" y="60">Event Name</text>
<rect id="lc_fadetext_description" x="250" y="90" width="600" height="60" />
<rect id="lc_video_promo" x="50" y="200" width="800" height="450" />

<!-- In your dataset -->
{{ event }} = "2025-12-15"
{{ event-name }} = "Annual Customer Summit 2025"
{{ description }} = "Join us for our biggest event of the year featuring keynotes, workshops, and networking"
{{ promo }} = "https://cdn.cast.app/videos/summit-promo.mp4"

Troubleshooting

Issue	Solution
Text not scrolling	Ensure element is `<rect>` and text exceeds container
Image not loading	Verify URL is accessible and format is supported
Video not playing	Check format (MP4 recommended) and URL
Date not displaying	Verify ISO format: YYYY-M-D
“No Image” showing	Check image URL or provide fallback
Text too small	Increase rect dimensions
Video too large	Compress video or reduce dimensions
Date text unreadable	Increase rect size or adjust fill color

Compatibility Notes

Scroll/Fade Text: Works with <rect> elements only
Images: Works with <rect> elements only
Videos: Works with <rect> elements only
Dates: Works with <rect> elements only

Ken Burns Animation - Animate images and videos
Dynamic Colors - Change date background colors
Setup Guide - Learn SVG export basics

← Back to Infographic Overview

Text & Media Content

When to Use These

Text Display

Scrolling Text

lc_scrolltext_*

Faded Text

lc_fadetext_*

Choosing Between Scroll and Fade

Images and Videos

Dynamic Images

lc_image_*

Dynamic Videos

lc_video_*

Dates

Formatted Date Display

lc_date_*

Complete Examples

Customer Profile with Media

Event Announcement

Troubleshooting

Compatibility Notes

Related Features

`lc_scrolltext_*`

`lc_fadetext_*`

`lc_image_*`

`lc_video_*`

`lc_date_*`