Interactive Components Showcase
A tour of every interactive component available for KetanLabs blog posts.
demointeractive
This post demonstrates all the custom interactive components available for use in KetanLabs blog posts. Each one is designed to make complex ideas more tangible and engaging.
Callout Boxes
Callouts draw attention to key information. There are four variants:
Information
This is an informational callout. Use it to highlight important context or background information that readers should know.
Pro Tip
Tips share practical advice. This teal-accented variant is perfect for actionable recommendations.
Heads Up
Warnings flag potential pitfalls. Use them when readers might run into common mistakes.
Critical
Danger callouts are for breaking changes, security issues, or anything that could cause real problems if ignored.
Before & After Slider
Drag the handle to compare two states side by side. This is useful for showing transformations, redesigns, or data changes.
DraftPolished
Timeline
Timelines visualize sequences of events with scroll-triggered animations. Each entry fades in as you scroll.
GPT-3 Released
OpenAI releases GPT-3 with 175 billion parameters, demonstrating few-shot learning capabilities that surprise the AI community.
ChatGPT Launch
ChatGPT reaches 100 million users in two months, making large language models accessible to the general public for the first time.
Enterprise AI Adoption
Businesses begin integrating AI into core workflows. McKinsey reports that generative AI could add $4.4 trillion annually to the global economy.
AI Agents Emerge
AI systems move beyond chat interfaces to autonomous agents that can browse the web, write code, and complete multi-step tasks.
AI-Native Companies
A new generation of companies are built from the ground up with AI at their core, fundamentally changing how businesses operate.
Scroll-Triggered Charts
Charts animate into view as you scroll down. Here is a line chart and a bar chart.
AI Investment Growth
Global AI Investment ($B)
AI Adoption by Industry
AI Adoption Rate by Industry (%)
Code Blocks
Standard markdown code blocks render with syntax highlighting:
def analyze_sentiment(text: str) -> dict:
"""Analyze the sentiment of a given text using a simple approach."""
positive_words = {"good", "great", "excellent", "amazing", "wonderful"}
negative_words = {"bad", "terrible", "awful", "horrible", "poor"}
words = text.lower().split()
pos = sum(1 for w in words if w in positive_words)
neg = sum(1 for w in words if w in negative_words)
return {
"positive": pos,
"negative": neg,
"sentiment": "positive" if pos > neg else "negative" if neg > pos else "neutral"
}
Wrapping Up
These components can be freely mixed with regular markdown content. They are designed to be composable — use them wherever they help tell the story better.