EmotionalType Creative Usage Demo

This project is a showcase of the Emotional Variable Font, featuring interactive and educational content about the ancient Tamil civilization. It demonstrates creative uses of variable fonts for word, line, and letter-based highlighting, making history engaging and visually dynamic.

🌐 Live Demo

• GitHub Pages: https://innovinitylabs.github.io/emotionaltype-creativeusage/

Explore all interactive modes and the full article online!

Features

• Article View (index.html):

  • A detailed, research-backed history of the Tamil people, their culture, and achievements.
  • Uses the Emotional Variable Font for section headings and emphasis.

• Word Highlight Demo (word-highlight.html):

  • Hover over any word to see the font animate between negative and positive weights.
  • The entire article content is split into word spans for interactive exploration.

• Line Highlight Demo (line-highlight.html):

  • Hover over any sentence to see the emotional font effect.
  • Sentences are split and highlighted individually for a unique reading experience.

• Reading Mode (reading-mode.html):

  • "Living" effect: the currently hovered word animates to positive, previously hovered words fade back to negative, creating a flowing effect.
  • Last hovered word remains highlighted for ADHD-friendly focus.
  • Sepia/vintage brown background for comfortable reading.
  • Toggle to disable highlights and a select mode for persistent word selection.

• Letter Highlight Demo (letter-highlight.html):

  • Each letter is wrapped in a span; hovering animates the letter.
  • Select mode available for persistent highlighting of letters.

• Navigation Bar on all pages for easy switching between modes.

How to Use

1. View Online:
   • Visit the GitHub Pages site for the full interactive experience.
2. Local Development:
   • Clone or download this repository.
   • Open any of the HTML files (index.html, word-highlight.html, line-highlight.html, reading-mode.html, letter-highlight.html) in your browser.
   • No build step or server is required—everything runs client-side.
   • Ensure the public/emotional-VF.ttf font file is present and referenced in your CSS.

Accessibility & UX

• Persistent focus highlight in Reading Mode is explained as ADHD-friendly in a footnote.
• Highlight color is standardized to a gentle sepia (#f5eeda) for comfort.
• Layout jitter is prevented by ensuring word/letter spans have a minimum width or buffer.
• All modes are designed for inclusivity and smooth user experience.

Animation Stability Fix

To prevent words, lines, or letters from jumping to the next line during font weight animation, the following improvements have been made site-wide:

• Each animated span (word, line, or letter) reserves its maximum width using min-width, measured at the boldest font weight.
• The text containers (e.g., .reading-demo-text, .word-demo-text, etc.) have extra right padding and overflow-x: hidden to provide a buffer for animated expansion.
• This ensures smooth, stable animations with no layout shifts, improving accessibility and user experience for all highlight demos.

Font Credits

• Emotional Variable Font by emotionaltype.org
• Font file: public/emotional-VF.ttf

Project Credits

Curated and enhanced by Valipokkann. For more projects, visit valipokkann.in.

Repository

• GitHub: https://github.com/innovinitylabs/emotionaltype-creativeusage.git

Contributing

Pull requests and suggestions are welcome! Please open an issue or PR for improvements or new creative uses of the font.

License

MIT

---

This project is for creative, educational, and demonstration purposes. For more on the Emotional Variable Font, visit emotionaltype.org.