nice reasoning animation

This commit is contained in:
Nate Kelley 2025-03-04 00:11:48 -07:00
parent 3655926d19
commit 6c6b1bdb06
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 12 additions and 8 deletions

View File

@ -10,7 +10,14 @@ const meta: Meta<typeof ReasoningMessage_PillsContainer> = {
parameters: { parameters: {
layout: 'centered' layout: 'centered'
}, },
tags: ['autodocs'] tags: ['autodocs'],
decorators: [
(Story) => (
<div className="p-2">
<Story />
</div>
)
]
}; };
export default meta; export default meta;
@ -20,7 +27,7 @@ const mockReasoningMessage: BusterChatMessageReasoning_pills = {
id: '1', id: '1',
type: 'pills', type: 'pills',
title: 'Found Terms', title: 'Found Terms',
secondary_title: 'Analyzing content', secondary_title: '4.2 seconds',
pill_containers: [ pill_containers: [
{ {
title: 'Important Terms', title: 'Important Terms',

View File

@ -6,14 +6,11 @@ import { BarContainer } from '../BarContainer';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
const containerVariants = { const containerVariants = {
hidden: { hidden: {},
opacity: 0
},
visible: { visible: {
opacity: 1,
transition: { transition: {
staggerChildren: 0.15, staggerChildren: 0.15,
delayChildren: 0.05 delayChildren: 0.1
} }
} }
}; };
@ -32,7 +29,7 @@ const itemVariants = {
ease: [0.4, 0, 0.2, 1] // Smooth easeInOutQuart ease: [0.4, 0, 0.2, 1] // Smooth easeInOutQuart
}, },
opacity: { opacity: {
duration: 0.32, duration: 0.62,
ease: [0.34, 1.56, 0.64, 1] // Bouncy easeOutBack ease: [0.34, 1.56, 0.64, 1] // Bouncy easeOutBack
} }
} }