- Introduced a new documentation page covering various pseudo-elements, including `::backdrop`, `::view-transition`, and `::scroll-marker`.
- Added examples and practical patterns for using these pseudo-elements effectively.
- Created a new CSS module for styling demo components related to pseudo-elements.
Also added TypeScript interface for icon properties to improve type safety in icon components.
- Removed voice parameter from TTS API calls to streamline the process.
- Consolidated voice handling to a single environment variable for cost efficiency.
- Updated related components and types to reflect the removal of voice selection.
- Implement a progress bar that simulates a download process.
- Includes start and reset functionality with visual feedback.
- Styles are defined in a separate CSS module for better organization.
feat(sidebar-demo): create a sidebar demo with animations
- Introduce a sidebar that can be toggled open and closed.
- Uses motion for smooth transitions and animations.
- Menu items are displayed with icons and labels.
feat(swipe-to-dismiss): implement swipe-to-dismiss notifications
- Create a notification system where users can swipe to dismiss.
- Notifications include icons and text, with animations on drag.
- Supports resetting notifications to the initial state.
feat(tab-switcher): add a tab switcher component
- Implement a tab switcher with smooth transitions between tabs.
- Each tab displays an icon and label, with an animated indicator.
- Uses motion for enhanced user experience.
feat(toast-demo): create a toast notification demo
- Implement toast notifications that appear on user action.
- Toasts include icons, titles, and can be dismissed.
- Styles are defined in a separate CSS module for clarity.
feat(tts): add edge TTS functionality for speech synthesis
- Implement speech synthesis using edge TTS with chunking support.
- Handles text splitting, audio generation, and subtitle parsing.
- Includes error handling and retry logic for robustness.
- Introduced a new demo showcasing scroll markers using CSS pseudo-elements.
- Added corresponding styles for the carousel and markers.
- Enhanced user interaction with scroll snapping and visual feedback.
feat(slotted-demo): implement slotted content demo with styles
- Created a demo for slotted content using custom elements and shadow DOM.
- Added styles for the demo, including button selection and visual transitions.
- Improved accessibility and user experience with audio feedback.
docs: add article on sound design in web interfaces
- Authored a comprehensive guide discussing the importance of sound in web design.
- Covered various use cases, implementation strategies, and design considerations.
- Included examples and references to enhance understanding of audio feedback.
docs: create guide on pseudo-elements in CSS
- Developed a detailed documentation on modern CSS pseudo-elements and their applications.
- Explained the usage of new pseudo-elements for styling native browser features.
- Provided practical examples and patterns for developers to implement in their projects.
- Removed unused types and state management logic.
- Introduced local state for wallet properties to enhance performance.
- Improved accessibility features for wallet dialog and inputs.
- Added new styles for backdrop and popup components to improve visual hierarchy and user interaction.
- Introduced new text styles for primary and secondary text.
- Updated wallet and options styles for better focus handling.
- Removed redundant styles and optimized existing ones for clarity.
BREAKING CHANGE: backdrop and popup z-index values have been adjusted.
- Refactor select components for better reusability and clarity.
- Update styles for improved layout and responsiveness.
- Modify color themes for better visual consistency.
- Correct minor typos and improve documentation clarity.
- Consolidate word highlighting functionality into a new module.
- Remove deprecated methods and streamline the highlight process.
- Update references in the Root component to utilize new highlight methods.
- Introduced multiple CSS files for styles, including reset, typography, shadows, and Radix color imports.
- Established CSS variables for spacing, typography, and shadows to ensure consistency across the application.
- Implemented styles for various HTML elements to enhance the overall design and readability.
This update lays the groundwork for a cohesive design system.
- Deleted Footer and Header components along with their styles as they are no longer needed.
- Introduced a new Shortcut component to manage keyboard shortcuts with tooltips.
- Deleted the CSS file for the audio component as it is no longer needed.
- This change helps to clean up the codebase and reduce unused styles.
fix(document): improve scroll detection logic
- Added a reference to track programmatic scrolling to prevent false user scroll detection.
- Adjusted the debounce timing for user scrolling detection to improve responsiveness.
style(document): increase audio component height
- Updated the height of the audio component from 256px to 384px for better visibility.
fix(utils): update selector for word spans
- Changed the selector from `[page-word-id]` to `[data-word-id]` to match the updated HTML structure.
style(theme): enhance active word styling
- Added color to active word states for better visibility and user experience.
- Create a zustand store for managing audio playback state, including
properties like audio URL, timestamps, playback status, volume, and
looping options.
- Add actions to update the audio state, such as setting audio data,
toggling mute, and resetting the state.
feat(styles): add styles for document components
- Introduce a comprehensive CSS module for styling various document
components, including headers, media players, controls, tooltips,
menus, and more.
- Ensure consistent design and responsiveness across different elements.
feat(toc): create table of contents component
- Implement a basic Table of Contents component that can be styled
and integrated into the document layout.
- Placeholder for future functionality to extract and render headings.
feat(types): define types for audio and document components
- Establish TypeScript types for audio state management, including
agent states, audio statuses, and word timestamps.
- Create a serializable page data interface for consistent data handling.
feat(utils): add utility functions for audio and timestamps
- Implement utility functions for formatting time, resolving window
sizes for timestamps, and aligning timeline data.
- Enhance functionality for locating word indices based on current
playback time.
- Refactored SVG components for SquareCursorIcon, SquizedIcon, StepBackIcon, and StepForwardsIcon to enhance readability and maintainability.
- Adjusted the structure of SVG elements for consistency across icons.
- Updated the index file to ensure proper exports of arrow icons.
This change does not introduce new features or fix bugs but improves the overall code quality.
- Introduced three new volume icons: VolumeMinimumIcon, VolumeOffIcon, and VolumeUpIcon.
- Created scripts for converting SVG icons to TSX components and for finding unused icons.
- Updated the icons directory structure and added functionality to manage icon usage.
Reviewed-by: Team
- Deleted playback store, types, utils, and styles that are no longer in use.
- Consolidated playback-related styles into a single module for better organization.
- Introduced a new HomeLayout component for improved page structure and search functionality.
BREAKING CHANGE: The playback API has been simplified and may require updates in dependent components.
Introduce a new interface, IconProps, to standardize the properties
for SVG icon components. This interface includes optional size and
color properties, enhancing the flexibility and usability of icon
components across the application.
- Introduced a new toolbar for figure components that appears on hover or focus.
- Added styles for the toolbar and buttons to enhance user interaction.
- Implemented a utility function to render figures as PNG blobs, excluding the toolbar from the output.
- Created an index file to export various animation principles.
- Added a new document discussing the differences between easing curves and springs, including foundational knowledge and decision-making guidance.
- Add a new playback system with controls for play, pause, seek, and volume.
- Introduce a Zustand store for managing playback state and actions.
- Create utility functions for handling timestamps and word alignment.
- Implement a custom hook for managing audio playback and UI interactions.
- Add styles for playback controls and layout.
This feature enhances the user experience by providing a seamless audio playback interface.
- Added playback rate control with predefined rates.
- Introduced volume control and mute functionality.
- Implemented looping feature for audio playback.
- Updated store and hooks to manage new state properties.
- Enhanced UI with new icons for speed, volume, and repeat functionalities.
- Added CSS styles for new components and controls.
Removed multiple empty <code-changes> sections from the changes log to improve readability and maintainability of the codebase. This helps in keeping the change history concise and focused on actual modifications.
- Updated metadata for improved SEO and social sharing.
- Added viewport settings for better mobile responsiveness.
- Introduced skip link for accessibility improvements.
- Introduced an `icon` field in document metadata to categorize content.
- Updated `PageCard` component to render icons based on the new metadata.
- Added new icon components for `EssayPreview` and `MotionPreview`.
- Refactored existing components to utilize the new icon system.
- Added props for slug, title, and description to the Footer component.
- Implemented clipboard functionality for copying links and text.
- Integrated sharing options for Twitter and GitHub.
- Improved animations for button interactions.
- Introduced a new Controls component to encapsulate media player controls.
- Added a ChaptersMenu and SettingsMenu for better organization and usability.
- Updated chapter numbering logic to improve chapter display.
- Removed playback rate management from the audio reader state.
- Enhanced CSS styles for better visual consistency and interaction feedback.
- Added playback rate functionality to the audio reader component.
- Integrated title and author name into the audio reader for improved metadata handling.
- Updated styles for better focus visibility on buttons.
- Introduced new GearIcon and PlaylistIcon components for UI consistency.
- Implemented the Straight Ahead Action and Pose to Pose components.
- Refactored existing styles and added new styles for better visual consistency.
- Updated various CSS variables to improve theme integration.
- Removed unused select component and styles to streamline the codebase.
- Implemented a new animation principle demonstrating follow-through and overlapping action.
- Created interactive components with drag-and-drop functionality.
- Added styles for the new components and integrated them into the existing principles.
feat(select): introduce custom select component
- Developed a reusable select component with various subcomponents for better modularity.
- Styled the select component to match the design system.
feat(staging): create staging component for visual storytelling
- Added a staging component that showcases images with text overlays.
- Implemented animations for image transitions and overlays.
feat(straight-ahead): add select options for animation techniques
- Created a selection interface for different animation techniques (Straight Ahead, Pose to Pose, Blending).
- Integrated the select component into the animation principles section.
- Deleted the Aphex Twin icon component and its references in the icons index.
- Removed the Timing component and its styles, which utilized the Aphex Twin icon.
- Updated various styles across the 12 principles documents to improve consistency and visual appearance.
- Added new functionality to the Timing component, which now uses chroma-js and pantone-tcx for color handling.
- Introduced new icons including NoteIcon and OpenAIIcon for enhanced visual representation.
- Added icons for the Squash and Stretch principles: ArrowIcon, CrownIcon, FireIcon, and ToastIcon.
- Implemented anticipation icons: HighPriority, InProgress, Done, Todo, Check, Bolt, and Avatar.
- Created corresponding styles and components for the new icons to ensure consistent design and functionality.
- Removed multiple CSS files and merged styles into a single index.css for better maintainability.
- Updated styles for headings, lists, tables, and code blocks to use CSS variables for consistency.
- Improved readability and organization of styles by utilizing the `:where` pseudo-class.
- Removed deprecated styles and ensured all typography and code styles are defined in one place.
BREAKING CHANGE: The structure of CSS files has changed, affecting how styles are imported and applied.
This commit cleans up the codebase by removing multiple instances of
unnecessary code changes that do not contribute to functionality or
performance. This helps maintain clarity and reduces potential
confusion for future development.
Raphael S.