Living Avatar System

Pixar-level character animation for the Ferni hero orb. It's not just an icon—it's a presence.

Live Demo

Move your mouse around. The avatar tracks your cursor with organic lag, like a curious creature watching you.

Mouse Tracking

Orb follows cursor with organic lag (0.08 interpolation factor)

Natural Blinking

Random intervals (2-6s) with 20% chance of double-blink

Micro-Expressions

Curious, delighted, thinking, recognition - triggered contextually

CTA Attention

Ferni looks at buttons when you hover them

Attention Glow

Pulse effect when looking at interactive elements

Scroll Response

Slight tilt in scroll direction (curiosity)

AI Copy Magic (Gemini-Powered)

Your existing Gemini AI capabilities unlocked. Dynamic copy that actually thinks - personalized hero, smart social proof, hover insights, and persona voices.

What's Now Enabled

These features were built but disabled. Now they're live:

Personalized Hero

Headlines adapt to time of day AND visitor behavior. Late night? Returning? Loyal? Each gets different copy.

Smart Social Proof

Rotating "Better Than Human" proof points that highlight memory, presence, and team superpowers.

Hover Insights

Ferni "whispers" when you hover over elements. "Want to ask them something?" on team cards.

Persona Voices

Type a question on any team card - get a response in that persona's voice via Gemini.

Adaptive CTAs

CTA text changes based on sentiment. Hesitant? "Just try talking". Engaged? "Let's do this".

Sentiment Tracking

Scroll depth + time + interactions = sentiment score. Copy softens or energizes accordingly.

Hero Variants (Live)

The AI Copy Magic system chooses the best variant automatically. Test them:

BETTER THAN HUMAN.

Finally, someone who gets it.

Someone who remembers your whole story, hears what you're not saying, and shows up at 2am with the same presence as noon.

Smart Social Proof (Live)

Watch the rotating "Better Than Human" proof points:

Messages rotate every 8 seconds showcasing memory, presence, and team superpowers.

API Endpoints (Backend)

These Gemini-powered endpoints are ready for deeper integration:

        POST /api/landing/ai/chat - Live AI conversation

        POST /api/landing/ai/personalized-hero - Dynamic headlines

        POST /api/landing/ai/persona-preview - Team member responses

        POST /api/landing/ai/faq - Smart FAQ answers

        POST /api/landing/ai/hover-preview - Contextual tooltips

        POST /api/landing/ai/sentiment-copy - Adaptive copy

        GET /api/landing/ai/social-proof - Dynamic testimonials

State Inspector

Current AI Copy Magic state:

{}

AI-Aware Personalization

"Better than human" means noticing things humans forget to notice. Time-aware copy, returning visitor recognition, adaptive CTAs.

Time-Aware Copy

The hero text changes based on when you visit. Try simulating different times:

Better than human.

Finally, someone who gets it.

Someone who remembers your whole story, hears what you're not saying, and shows up at 2am with the same presence as noon.

Late Night (11pm-4am)

"Still up?" - Intimate, vulnerable tone

Early Morning (5-7am)

"You're up early." - Quiet determination

Morning (8-11am)

"Good morning." - Fresh energy

Returning Visitors

"You came back." / "Hey again." / "Welcome home."

Scroll-Adaptive CTAs

CTA text evolves based on scroll depth

Mood Color Shifts

Subtle warmth adjustments based on time of day

Scroll-Driven Storytelling

Apple-style cinematic scroll experiences. The page is a story—scrolling is reading.

Features

Parallax Depth

Hero background orbs move at different speeds for depth effect

Progress Indicator

Fixed sidebar showing scroll progress with section markers

Cinematic Reveals

Elements fade/slide in with staggered timing (80ms between children)

Sticky Story

Sections that progress through stages as you scroll

Momentum Physics

Subtle skew based on scroll velocity

Scroll Indicator

Mouse icon with animated wheel, fades after scroll

// Easing functions for Pixar-quality motion
EASING.expoOut  // Dramatic deceleration (Apple's favorite)
EASING.spring   // Overshoot bounce (Pixar's signature)
EASING.smooth   // Smooth in-out
EASING.cinematic // Slow-fast-slow

Interactive Demo Widget

A mini chat that shows Ferni's magic. Show, don't tell—let people feel the difference.

How It Works

The widget appears in the bottom-right corner after 5 seconds. It "peeks" with a message after 15 seconds if you haven't opened it.

Pre-Scripted Conversations

Responses triggered by keywords like "stressed", "work", "relationship"

Memory Demo

References earlier messages to show memory capability

Typing Indicator

Animated dots with personality variations

Time-Aware Greeting

Different opening based on time of day

Voice Hint

Shows phone number when clicking mic button

Emotion Badges

Shows Ferni's emotional state during conversation

Predictive Typing Response

Ferni shows micro-expressions AS you type, not after. Sees "stress" forming and shows concern before you finish typing.

Try It

Open the demo widget and start typing emotional words. Watch the orb react before you finish.

Concern Triggers

str... anx... worr... scar... (stressed, anxious, worried, scared)

Delight Triggers

hap... exc... ama... gre... (happy, excited, amazing, great)

Curiosity Triggers

why... how... what... wond... (questions and wondering)

Thoughtful Triggers

mean... purp... life... futu... (meaning, purpose, life, future)

Voice-Activated Demo

Real voice interaction on the landing page using WebSpeech API. Click mic, speak, Ferni responds.

How It Works

Click the microphone button in the demo widget and speak. Ferni transcribes and responds contextually.

Greetings

"Hello", "Hi", "Hey" - Warm welcome responses

Feelings

"I'm feeling stressed" - Empathetic follow-ups

Questions

"How can you help?" - Thoughtful exploration

Silence Detection

Auto-stops after 2s of silence

Note: Requires microphone permission. WebSpeech API support varies by browser.

Scroll-Linked Hero Transformation

As you scroll, the hero dramatically transforms: Ferni rises, background layers separate, text fades cinematically.

Effects

Orb Rise

Ferni orb rises 80px and scales to 1.3x as you scroll

Ring Expansion

Rings expand outward with staggered timing

Text Fade

Headline and tagline fade up with blur effect

Glow Intensity

Glow intensifies then fades as scroll progresses

Background Parallax

Background layers move at different depths

Body Classes

.hero-scrolled, .hero-half-scrolled, .hero-fully-scrolled for CSS hooks

See It On Live Page

Holographic Text Effect

Prismatic shimmer that shifts with mouse position. Like light refracting through glass.

Live Demo

Move your mouse around. The shimmer follows your cursor with organic lag.

Better than human.

Mouse-Tracked Shimmer

Radial gradient follows cursor position with smooth interpolation

Hue Shift

Color subtly shifts based on mouse X position

Rainbow Edge

Subtle prismatic edge glow on hover

Chromatic Variant

.holographic-text--chromatic for red/cyan split effect

Emotional Journey Visualization

A beautiful flowing timeline showing how conversations evolve emotionally over time.

Live Demo

Hover over points to see conversation snippets. The wave shows emotional intensity.

Cursor Ripple Effect

Water-like ripples spread from every click. Premium, responsive feel.

Try It

Click anywhere on this page. Soft green ripples spread from your click point.

Click anywhere in this area

Global Ripples

Click anywhere creates subtle ripple effect

Button Ripples

Material Design style contained ripples on buttons

Click Dot

Small dot flash at click point for feedback

Configurable

Adjust color, size, duration via CSS variables

Live Presence Indicator

"47 people are talking with Ferni right now" - Social proof with subtle pulse animation.

Live Demo

The indicator appears in the hero section (or floating). Count fluctuates naturally.

47 people talking with Ferni right now

Animated Pulse

Green dot with expanding ring animation

Count Animation

Numbers animate up/down with easing

Natural Fluctuation

Count changes within 15% every 8 seconds

Update Pulse

Subtle glow when count updates

Breathing Testimonial Cards

Cards that subtly "breathe" and react to hover with 3D depth. Living, organic feel.

Live Demo

Hover over these cards. They tilt toward your mouse and catch the light.

Ferni remembered something I mentioned three weeks ago. My therapist doesn't even do that.

S

Sarah M.

Using Ferni for 2 months

At 2am when I couldn't sleep, Ferni was there. Same warmth as noon. That's when I knew this was different.

M

Michael R.

Using Ferni for 4 months

Six perspectives, one conversation. I used to need a therapist, a coach, and three friends. Now I just need Ferni.

J

Jamie L.

Using Ferni for 6 months

Breathing Animation

Subtle scale (1.01x) with staggered timing

3D Hover Tilt

Cards tilt up to 5 degrees toward mouse

Dynamic Shadows

Shadow moves based on tilt angle

Light Sweep

Shine effect sweeps across on hover

Sound Design

Subtle, tasteful ambient sounds that enhance interactions. Default OFF - user opts in.

Available Sounds

All sounds are synthesized via Web Audio API - no audio files needed.

Click Sound

Short 440Hz tone (80ms) on button clicks

Hover Sound

Subtle 880Hz tone (50ms) on hover

Success Chord

C-E-G chord sequence for achievements

Message Sounds

Send (660Hz) and receive (440-523Hz) tones

Sound is disabled by default. Preference is saved to localStorage.

Integration

All features are built as independent modules. Add what you need:

<!-- Core Systems -->
<link rel="stylesheet" href="/css/living-avatar.css">
<link rel="stylesheet" href="/css/ai-personalization.css">
<link rel="stylesheet" href="/css/scroll-storytelling.css">
<link rel="stylesheet" href="/css/demo-widget.css">

<!-- New Shock & Awe Systems -->
<link rel="stylesheet" href="/css/predictive-typing.css">
<link rel="stylesheet" href="/css/voice-demo.css">
<link rel="stylesheet" href="/css/scroll-hero.css">
<link rel="stylesheet" href="/css/holographic-text.css">
<link rel="stylesheet" href="/css/emotional-journey.css">
<link rel="stylesheet" href="/css/cursor-ripple.css">
<link rel="stylesheet" href="/css/presence-indicator.css">
<link rel="stylesheet" href="/css/breathing-cards.css">

<!-- JavaScript -->
<script src="/js/living-avatar.js"></script>
<script src="/js/ai-personalization.js"></script>
<script src="/js/scroll-storytelling.js"></script>
<script src="/js/demo-widget.js"></script>
<script src="/js/predictive-typing.js"></script>
<script src="/js/voice-demo.js"></script>
<script src="/js/scroll-hero.js"></script>
<script src="/js/holographic-text.js"></script>
<script src="/js/emotional-journey.js"></script>
<script src="/js/cursor-ripple.js"></script>
<script src="/js/presence-indicator.js"></script>
<script src="/js/breathing-cards.js"></script>
<script src="/js/sound-design.js"></script>

See All Features Live