SceneScenes

claude-chat30fps · 960×540

Claude♙Project Operations/Scatter Plot for User Engagement Metrics

☆Share⚙

TXT

SMBuild a scatter plot to visualize the relationship between page load time and user session duration.

</>

Scatter Plot for User Engagement Metrics

Open component

CopyRetry👍👎

Claude can make mistakes. Please double-check responses.

Reply to Claude...

Claude 3.5 Sonnet

🔗

←Scatter Plot for User Engagement Metrics

PreviewCode×

import React from 'react';
import { ScatterChart, Scatter, XAxis, YAxis,
  CartesianGrid, Tooltip } from 'recharts';
 
const data = [
  { pageLoadTime: 1.5, sessionDuration: 12 },
  { pageLoadTime: 2.3, sessionDuration: 8 },
  { pageLoadTime: 0.9, sessionDuration: 18 },
  { pageLoadTime: 3.1, sessionDuration: 6 },
  { pageLoadTime: 1.8, sessionDuration: 14 },
  { pageLoadTime: 2.7, sessionDuration: 9 },
];
 
export default function UserEngagementScatterPlot() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <ScatterChart margin={{ top: 20, right: 20 }} />
    </ResponsiveContainer>
  );
}

Last edited 2 seconds agoCopy

Install

$ npx remotion-ui@latest add claude-chat

Animated Claude chat composer with typed prompt and waveform-to-send morph.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import

@/remotion/scenes/claude-chat

Use when: full-frame scenes, overlays, cards, and reusable video sections.
Customize: placeholder, prompt, response, artifactTitle, plus copied source for timing, layout, colors, and typography.
Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example

import { ClaudeChat } from "@/remotion/scenes/claude-chat";

<ClaudeChat prompt="Draft a launch tweet for our new release" />

API Reference

Prop	Type	Default	Description
placeholder	string	-	Empty composer placeholder text.
prompt	string	-	Prompt typed into the chat thread.
response	string	-	Assistant response streamed before the artifact appears.
artifactTitle	string	-	Title shown in the artifact/code panel.
projectName	string	-	Project breadcrumb label in the top bar.
modelName	string	"Claude 3.5 Sonnet"	Model label in the composer.
modelTier	string	""	Optional tier label beside the model.
accentColor	string	"#D97757"	Accent and send button color.
theme	"light" \| "dark"	"light"	Light or dark surface palette.

chat-gpt v0 chat-to-preview

Claude Chat

Agent notes

Usage

API Reference

Related