Widget Reference
Complete reference guide for all available widgets in Tintage's template system.
Displays static or animated text content with fade animations.
📖 For detailed examples and advanced usage, see the Text Widget documentation
Attributes
data-type
string
-
Must be "text"
data-animate
string
-
Animation type: "fade"
data-ease
string
-
Easing function: "easeIn", "easeOut"
data-duration-animation
number
2
Animation duration in seconds
data-start
number
0
When animation starts in seconds
Example
<div data-type="text"
data-animate="fade"
data-ease="easeIn"
data-duration-animation="3"
data-start="1"
class="text-4xl font-bold text-blue-600">
Your animated text here
</div>Animation Behavior
Before start: Element is invisible (opacity: 0)
During animation: Fades in from 0 to 1 opacity
After animation: Remains fully visible (opacity: 1)
Related Widgets
Typewriter Widget - For typing effects
Container Widget - For grouping text elements
Image Widget - For combining text with images
Creates a typewriter effect that types out text character by character with a blinking cursor.
📖 For detailed examples and advanced usage, see the Typewriter Widget documentation
Attributes
data-type
string
-
Must be "typewriter"
data-duration-animation
number
3
How long typing takes in seconds
data-start
number
0
When typing starts in seconds
Example
<div data-type="typewriter"
data-duration-animation="5"
data-start="2"
class="text-2xl font-mono text-green-600">
This text will be typed out character by character
</div>Animation Behavior
Before start: No text visible, no cursor
During animation: Text appears character by character with blinking cursor
After animation: Full text visible, cursor disappears
Cursor Styling
The cursor is automatically added and styled. It blinks every 1 second during typing.
Related Widgets
Text Widget - For static text with fade effects
Counter Widget - For animated numbers
Container Widget - For grouping typewriter elements
Animates a number counting up from 0 to a target value with smooth interpolation.
📖 For detailed examples and advanced usage, see the Counter Widget documentation
Attributes
data-type
string
-
Must be "counter"
data-end-number
number
1000
Final number to count to
data-decimal
string
"false"
Show decimal places: "true" or "false"
data-duration-animation
number
4
How long counting takes in seconds
data-start
number
0
When counting starts in seconds
Example
<div data-type="counter"
data-end-number="50000"
data-decimal="false"
data-duration-animation="6"
data-start="1"
class="text-6xl font-bold text-purple-600">
</div>Animation Behavior
Before start: Shows 0
During animation: Smoothly counts up with cubic easing
After animation: Shows final number
Number Formatting
Integers: Uses
toLocaleString()for comma separation (e.g., "1,000,000")Decimals: Shows 2 decimal places (e.g., "1,234.56")
Related Widgets
Text Widget - For labels and descriptions
Typewriter Widget - For text animations
Container Widget - For grouping counter elements
Displays images with optional fade animations.
📖 For detailed examples and advanced usage, see the Image Widget documentation
Attributes
data-type
string
-
Must be "image"
src
string
-
Image URL (required)
alt
string
-
Alt text for accessibility
data-animate
string
-
Animation type: "fade"
data-ease
string
-
Easing function: "easeIn", "easeOut"
data-duration-animation
number
2
Animation duration in seconds
data-start
number
0
When animation starts in seconds
Example
<img data-type="image"
src="https://example.com/logo.png"
alt="Company Logo"
data-animate="fade"
data-ease="easeIn"
data-duration-animation="2"
data-start="1"
class="w-32 h-32" />Animation Behavior
Before start: Image is invisible (opacity: 0)
During animation: Fades in from 0 to 1 opacity
After animation: Remains fully visible (opacity: 1)
Image Requirements
Format: JPG, PNG, GIF, WebP
Size: Optimize for web (recommended max 2MB)
URL: Must be publicly accessible
Related Widgets
Text Widget - For captions and labels
Container Widget - For grouping images
Counter Widget - For combining with statistics
Groups elements together and provides layout structure. Supports both HTML and SVG elements.
📖 For detailed examples and advanced usage, see the Container Widget documentation
Attributes
data-type
string
-
Must be "container"
Supported Tags
HTML Elements:
divspanp
SVG Elements:
svgg
Example
<div data-type="container" class="flex items-center justify-center w-full h-full">
<div data-type="text" class="text-2xl">Content inside container</div>
</div>SVG Container Example
<svg data-type="container" viewBox="0 0 200 200" width="200" height="200">
<circle cx="100" cy="100" r="50" fill="blue" />
<text x="100" y="110" text-anchor="middle" fill="white">SVG Content</text>
</svg>Animation Timing Reference
Easing Functions
easeIn
Slow start, fast end
Text appearing
easeOut
Fast start, slow end
Text disappearing
Default
Cubic ease-out
General animations
Timing Guidelines
Text fade
1-3 seconds
Headlines, titles
Typewriter
3-8 seconds
Long text, messages
Counter
2-6 seconds
Statistics, numbers
Image fade
1-2 seconds
Logos, photos
Video Timeline
Total Duration: 200 frames at 30 FPS (6.67 seconds)
Planning: Space animations to fit within this timeframe
Sequencing: Use
data-startto create smooth transitions
Styling Reference
CSS Classes (Tailwind)
Position
absolute, relative, fixed
Element positioning
Layout
top-1/2, left-1/2, -translate-x-1/2
Centering elements
Typography
text-4xl, font-bold, text-center
Text styling
Colors
text-blue-600, bg-red-500
Text and background colors
Spacing
mt-4, px-8, py-2
Margins and padding
Size
w-full, h-full, w-32, h-32
Width and height
Inline Styles
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #3b82f6; font-size: 2rem;">
Inline styled content
</div>SVG Attributes
SVG attributes are automatically converted from kebab-case to camelCase:
stroke-width
strokeWidth
stroke-linecap
strokeLinecap
stroke-linejoin
strokeLinejoin
stroke-dasharray
strokeDasharray
fill-opacity
fillOpacity
stroke-opacity
strokeOpacity
clip-path
clipPath
Common Patterns
Centered Layout
<div class="relative w-full h-full" data-type="container">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<!-- Centered content -->
</div>
</div>Multi-layer Animation
<div class="relative w-full h-full bg-black" data-type="container">
<!-- Background text -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl text-gray-800"
data-type="text" data-start="0" data-duration-animation="1">
BACKGROUND
</div>
<!-- Foreground text -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-white"
data-type="text" data-start="2" data-duration-animation="2">
FOREGROUND
</div>
</div>Responsive Text Sizing
<div class="text-2xl md:text-4xl lg:text-6xl" data-type="text">
Responsive text
</div>Related Widgets
Text Widget - For text content inside containers
Image Widget - For images inside containers
Counter Widget - For animated numbers inside containers
Last updated