Eye Animations
The single Cyclops eye is the hero feature. Like Luxo Jr.'s lamp or Mike Wazowski, one eye can convey incredible range of emotion through size, shape, and pupil position.
Eye Animation Reference
| Animation | Duration | What Moves | Use Case |
|---|---|---|---|
| Blink | 150ms | Whole eye scaleY | Natural punctuation, acknowledgment |
| Double Blink | 400ms | Whole eye scaleY x2 | Surprise, realization |
| Wide | 500ms | Eye scale up | Surprise, excitement, emphasis |
| Squint | 600ms | Eye scaleY down | Thinking, skepticism, focus |
| Look Around | 1200ms | Iris + pupil translate | Curiosity, searching, considering |
Mouth Animations
The smile complements the eye. Together they create the full emotional range.
Character Reactions
Full reactions combine face movement, eye animation, and mouth changes. Each follows the 3-phase sequence: Anticipation, Action, Follow-Through.
Reaction Reference
| Reaction | Duration | Eye | Face | Use Case |
|---|---|---|---|---|
| Nod | 600ms | Blink at peak | Vertical bob | Agreement, understanding |
| Shake | 500ms | Squint | Horizontal shake | Gentle disagreement |
| Bounce | 700ms | Wide eye | Squash and stretch | Excitement, joy |
| Curious | 1000ms | Look around | Head tilt | Interest, questioning |
| Thinking | 1000ms | Squint + look up | Slight tilt | Processing, considering |
| Celebrate | 1000ms | Wide + smile grow | Wiggle | Achievement, success |
The 12 Principles of Animation
These classic principles from Disney and Pixar guide how Ferni moves. The single eye makes many of these even more impactful.
Squash and Stretch
The eye and face deform based on speed and mass. During bounce, face compresses horizontally when stretching vertically.
Anticipation
Wind-up before action. The eye squints slightly before going wide. Face dips before bouncing up.
Staging
The single eye IS the staging. All attention naturally focuses on one point. Maximum clarity.
Straight Ahead and Pose to Pose
Key poses at 0%, 35%, 50%, 70%, 100%. The eye has clear states: normal, wide, squint, closed.
Follow-Through and Overlapping
The pupil settles after the iris. The highlight lags behind the pupil. Face settles after eye.
Slow In and Slow Out
Never linear motion. Pupil movements ease in and out. Use spring easing for organic feel.
Arcs
Natural motion follows curved paths. The pupil traces arcs when looking around, not straight lines.
Secondary Action
The highlight sparkle, subtle face breathing, iris color shifts. These support without distracting.
Timing
Blink is fast (150ms). Thinking is slow (1000ms). Timing conveys emotion and weight.
Exaggeration
Wide eye scales 1.2x, not 1.05x. Bounce goes high. The single eye allows bold exaggeration.
Solid Drawing
Consistent transform-origin. Eye elements scale from center. Face scales from center-bottom.
Appeal
The Cyclops design is instantly memorable and likeable. Like Luxo Jr., one eye creates charm.
Easing Curves
Hover over each box to see the easing in action. Never use linear — everything should feel organic.
Code Examples
Cyclops Eye Blink Animation
/* Cyclops blink - whole eye shrinks vertically */
@keyframes cyclops-blink {
0%, 45%, 55%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.05); }
}
/* Apply to all eye elements */
.ferni-avatar .eye-white,
.ferni-avatar .iris,
.ferni-avatar .pupil,
.ferni-avatar .highlight {
animation: cyclops-blink 150ms var(--ease-standard);
}Pupil Gaze Animation
/* Move iris and pupil for gaze direction */
@keyframes look-around {
0%, 100% { transform: translate(0, 0); }
20% { transform: translate(-3px, -2px); }
40% { transform: translate(3px, -1px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(-2px, 1px); }
}
.ferni-avatar .iris,
.ferni-avatar .pupil,
.ferni-avatar .highlight {
animation: look-around 1200ms var(--ease-organic);
}