### Include USAL.js via CDN

Source: https://context7_llms

Quickstart setup for USAL.js by including the latest version of the library via a Content Delivery Network (CDN) in an HTML file.

```html
<script src="https://cdn.usal.dev/latest"></script>
```

--------------------------------

### Install USAL.js via NPM

Source: https://usal.dev/

Instructions for installing the core USAL.js library and framework-specific packages using npm.

```bash
npm install usal

# Framework-specific packages:
npm install @usal/react
npm install @usal/solid
npm install @usal/svelte
npm install @usal/vue
npm install @usal/lit
npm install @usal/angular
```

--------------------------------

### Install USAL.js via NPM

Source: https://context7_llms

Installs the core USAL.js library and framework-specific packages for React, Solid, Svelte, Vue, Lit, and Angular using npm.

```bash
npm install usal
npm install @usal/react
npm install @usal/solid
npm install @usal/svelte
npm install @usal/vue
npm install @usal/lit
npm install @usal/angular
```

--------------------------------

### Instant Animation Example

Source: https://usal.dev/

Demonstrates an animation ('fade-u') with zero delay and a duration of 800ms.

```html
fade-u delay-0 duration-800
```

--------------------------------

### USAL.js Framework Integration Examples

Source: https://context7_llms

Demonstrates how to apply USAL.js animations using data attributes and framework-specific directives for Vanilla JS, React, Solid, Svelte, Vue, Lit, and Angular.

```html
<!-- Vanilla JS -->
<div data-usal="fade-u duration-500">Content</div>
```

```html
<!-- React/Next.js -->
<div data-usal="fade-u duration-500">Content</div>
```

```html
<!-- Solid/SolidStart -->
<div data-usal="fade-u duration-500">Content</div>
```

```html
<!-- Svelte/SvelteKit -->
<div use:usal={'fade-u duration-500'}>Content</div>
```

```html
<!-- Vue/Nuxt -->
<div v-usal="'fade-u duration-500'">Content</div>
```

```html
<!-- Lit -->
<div ${usal('fade-u duration-500')}>Content</div>
```

```html
<!-- Angular -->
<div [usal]="'fade-u duration-500'">Content</div>
```

--------------------------------

### USAL.js Playground - Presets

Source: https://playground.usal.dev/

Quickly apply predefined animation configurations using presets like 'Hero Title', 'Card List', 'Counter', 'Shimmer Text', 'Text Fluid', 'Split Paragraph', and 'Tuned Animation'. These presets offer starting points for common animation needs.

```HTML
<div>
  <label>Presets</label>
  <select>
    <option>Hero Title</option>
    <option>Card List</option>
    <option>Counter</option>
    <option>Shimmer Text</option>
    <option>Text Fluid Text</option>
    <option>Split Paragraph</option>
    <option>Custom Timeline</option>
    <option>Tuned Animation</option>
    <option>Loop Animation</option>
    <option>Stagger Effect</option>
  </select>
</div>
```

--------------------------------

### Order Matters in Transformations

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Demonstrates how the order of transformation properties within the `line-[{value}]` syntax affects the animation outcome. The example shows 'Rotate then translate' versus 'Translate then rotate'.

```HTML
<div data-usal="line-[r+45tx+50]">Rotate then translate</div>
<div data-usal="line-[tx+50r+45]">Translate then rotate</div>
```

--------------------------------

### Delayed Animation Example

Source: https://usal.dev/

Shows a 'zoomin' animation with a delay of 200ms and a duration of 1000ms.

```html
zoomin delay-200 duration-1000
```

--------------------------------

### Apply Basic Fade-Up Animation

Source: https://usal.dev/

Example of applying a 'fade-up' animation to an HTML element using the data-usal attribute.

```html
<div data-usal="fade-u">Fade Up</div>
```

--------------------------------

### Apply Complex Zoom Animation

Source: https://usal.dev/

Example of a 'zoomout-ur' animation combined with 'blur' and a duration of 1200ms.

```html
<div data-usal="zoomout-ur blur duration-1200">Complex zoom</div>
```

--------------------------------

### Count Animation in USAL

Source: https://usal.dev/

Shows how to animate numbers from 0 to their target value, including examples of targeting specific numbers within text content.

```html
// Syntax: count-[target]
// The target number must exist in the element's text content

count-[1234]     // Element must contain "1234"
count-[98.5]     // Element must contain "98.5"  
count-[42,350]   // Element must contain "42,350"

// HTML Example:
<span data-usal="count-[1000]">1000</span>
// Animates: 0 â→ 1000

<span data-usal="count-[4.9]">Rating: 4.9/5</span>
// Finds "4.9" and animates: 0 â→ 4.9
```

--------------------------------

### Custom Duration and Easing Animation

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Combines custom timeline properties with duration and easing modifiers. The example sets a duration of 2000ms and uses a cubic-bezier easing function for a custom animation curve.

```HTML
<div data-usal="line-[o+0s+0.5|50s+1.2|o+100s+1] duration-2000 easing-[cubic-bezier(0.4,0,0.2,1)]">
  Custom timeline with duration and easing
</div>
```

--------------------------------

### Chain USAL JavaScript Configuration and Control Methods

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Demonstrates chaining multiple USAL configuration and control methods in a single sequence for efficient updates and operations.

```JavaScript
// Methods return the instance for chaining
window.USAL.config({ defaults: { duration: 500 } })
  .restart()
  .config({ once: true });
```

--------------------------------

### USAL Framework Integration

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Demonstrates how to integrate USAL animations into different JavaScript frameworks and libraries. This includes Vanilla JS, React/Next.js, Solid/SolidStart, Svelte/SvelteKit, Vue/Nuxt, Lit, and Angular.

```html
<div data-usal="fade duration-500">Content</div>
```

```jsx
<div data-usal="fade duration-500">Content</div>
```

```svelte
<script>
  import { usal } from 'usal';
</script>

<div use:usal={'fade duration-500'}>Content</div>
```

```vue
<template>
  <div v-usal="'fade duration-500'">Content</div>
</template>

<script>
export default {
  directives: {
    usal: {
      mounted(el, binding) {
        // USAL integration logic here
      }
    }
  }
}
</script>
```

```lit
import { html, css, LitElement } from 'lit';
import { usal } from 'usal';

class MyElement extends LitElement {
  render() {
    return html`<div ${usal('fade duration-500')}>Content</div>`;
  }
}
customElements.define('my-element', MyElement);
```

```angular
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<div [usal]="'fade duration-500'">Content</div>'
})
export class MyComponent {}
```

--------------------------------

### Animation Delay Modifier

Source: https://github.com/italoalmeida0/usal/wiki/API-Summary

Sets the delay before an animation starts in milliseconds.

```CSS
delay-{milliseconds} // milliseconds
```

--------------------------------

### Get USAL Version

Source: https://usal.dev/

Retrieves the current version of the USAL library as a string.

```JavaScript
console.log(window.USAL.version);
```

--------------------------------

### Python Oppo/Realme Flash File Tool: OppoRealme-OFP-Flash

Source: https://github.com/italoalmeida0

OppoRealme-OFP-Flash is an archived Python project designed to handle Oppo/Realme flash .OFP files on the bootloader. It provides functionality for interacting with these specific firmware files.

```Python
Oppo/Realme Flash .OFP File on Bootloader
```

--------------------------------

### Complex Entrance Animation

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Demonstrates a complex entrance animation using multi-line formatting for readability. It combines opacity, scale, and translate properties across multiple keyframes.

```HTML
<div data-usal="line-[
  O+0 SX+0.2 SY+0.2 TX+70 |
  40 O+50 SX+0.8 SY+0.8 TX+35 |
  70 O+90 SX+0.95 SY+0.95 TX+5 |
  O+100 SX+1 SY+1 TX+0
]">
  Complex entrance (case-insensitive)
</div>
```

--------------------------------

### Initialize USAL.js with Configuration

Source: https://usal.dev/

Configures USAL.js with custom threshold and delay settings. This is typically done after the DOM is loaded to ensure all elements are available.

```JavaScript
document.addEventListener('DOMContentLoaded', function () {
  window.USAL.config({ threshold: 10, delay: 100 });
});
```

--------------------------------

### Manage USAL Initialization and Control

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Provides JavaScript methods to check if USAL is initialized, restart the service, completely shut it down, and retrieve its version number.

```JavaScript
// Check if initialized
if (window.USAL.initialized()) {
  console.log('USAL is running');
}
```

```JavaScript
// Restart USAL (destroy + reinitialize)
window.USAL.restart();
```

```JavaScript
// Completely shut down USAL
window.USAL.destroy();
```

```JavaScript
// Get version
console.log(window.USAL.version);
```

--------------------------------

### Integrate with highlight.js

Source: https://usal.dev/

Checks if the highlight.js library is available and, if so, calls its 'highlightAll' method to apply syntax highlighting to code blocks on the page.

```javascript
if (typeof hljs !== 'undefined') {
  hljs.highlightAll();
}
```

--------------------------------

### GitHub Copilot Feature Flags and API Configuration

Source: https://github.com/italoalmeida0/usal/wiki/API-Summary

This snippet details the feature flags enabled for GitHub Copilot and specifies the Copilot API override URL. It is relevant for understanding the project's integration with AI-powered development tools.

```json
{"locale":"en","featureFlags":["alternate_user_config_repo","api_insights_show_missing_data_banner","attestations_filtering","attestations_sorting","client_version_header","codespaces_prebuild_region_target_update","contact_requests_implicit_opt_in","contentful_lp_enterprise","contentful_lp_footnotes","copilot_agent_task_caching","copilot_api_agentic_issue_marshal_yaml","copilot_api_draft_issue_with_mixed_trees","copilot_chat_attach_multiple_images","copilot_chat_file_redirect","copilot_chat_group_notifications","copilot_chat_no_header","copilot_chat_reduce_quota_checks","copilot_chat_search_bar_redirect","copilot_chat_vision_in_claude","copilot_chat_vision_skip_thread_create","copilot_coding_agent_diff_stats","copilot_custom_copilots_feature_preview","copilot_custom_copilots_images","copilot_duplicate_thread","copilot_features_raycast_logo","copilot_free_to_paid_telem","copilot_ftp_hyperspace_upgrade_prompt","copilot_ftp_settings_upgrade","copilot_ftp_upgrade_to_pro_from_models","copilot_ftp_your_copilot_settings","copilot_global_overlay_v2","copilot_immersive_agent_branch_selection","copilot_immersive_draft_issue_tree","copilot_immersive_structured_model_picker","copilot_loops_share_button","copilot_no_floating_button","copilot_read_shared_conversation","copilot_spaces_input_menu_select","copilot_spark_allow_empty_commit","copilot_spark_single_user_iteration","copilot_spark_use_billing_headers","copilot_spark_write_iteration_history_to_git","copilot_stable_conversation_view","copilot_task_oriented_assistive_prompts","copilot_workbench_agent_seed_tool","copilot_workbench_cache","copilot_workbench_connection_reload_banner","copilot_workbench_preview_analytics","copilot_workbench_ratelimit_fallback","copilot_workbench_refresh_on_wsod","copilot_workbench_synthetic_generation","custom_copilots_capi_mode","dashboard_public_preview","direct_to_salesforce","dotcom_chat_client_side_skills","failbot_report_error_react_apps_on_page","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","global_search_multi_orgs","hpc_improve_dom_insertion_observer","hyperspace_diff_view","insert_before_patch","issue_fields_report_usage","issues_preserve_tokens_in_urls","issues_react_blur_item_picker_on_close","issues_react_bots_timeline_pagination","issues_react_prohibit_title_fallback","issues_react_remove_placeholders","lifecycle_label_name_updates","link_contact_sales_swp_marketo","loops_versioning","marketing_pages_search_explore_provider","mcp_registry_all_featured_cards","memex_mwl_filter_field_delimiter","migrate_toasts_to_banners_web_notifications","new_insights_rulesets_filter","new_traffic_page_banner","override_pulse_legacy_url","primer_react_segmented_control_tooltip","primer_react_unified_portal_root","record_sso_banner_metrics","releases_update_ref_selector","remove_child_patch","repos_insights_remove_new_url","sample_network_conn_type","scheduled_reminders_updated_limits","show_edit_on_default_option","site_homepage_contentful","site_msbuild_webgl_hero","spark_commit_on_default_branch","spark_sync_repository_after_iteration","viewscreen_sandbox","webp_support","workbench_default_sonnet4","workbench_store_readonly"],"copilotApiOverrideUrl":"https://api.githubcopilot.com"}
```

--------------------------------

### Apply Flip-Up Animation

Source: https://usal.dev/

Illustrates applying a 3D 'flip-up' animation to an element.

```html
<div data-usal="flip-u">3D flip from top</div>
```

--------------------------------

### Get Section Information for Navigation

Source: https://usal.dev/

This JavaScript function retrieves navigation information from an element with the ID 'sidebar'. It identifies navigation items, extracts their section IDs and text content, and returns an object containing the order of sections and a mapping of section IDs to their names. This data can be used to build dynamic navigation controls.

```javascript
function getSectionInfo() {
  const sidebar = document.getElementById('sidebar');
  if (!sidebar) return { order: [], names: {} };
  const navItems = sidebar.querySelectorAll('.nav-item');
  const sectionOrder = [];
  const sectionNames = {};
  navItems.forEach((item) => {
    const sectionId = item.getAttribute('data-section');
    if (sectionId) {
      sectionOrder.push(sectionId);
      sectionNames[sectionId] = item.textContent.trim();
    }
  });
  return { order: sectionOrder, names: sectionNames };
}
```

--------------------------------

### Configure Tab Size for Code

Source: https://github.com/italoalmeida0

This snippet demonstrates how to set the tab size preference for code blocks using CSS variables. It ensures consistent indentation across different code displays.

```css
:root { --tab-size-preference: 4; } pre, code { tab-size: var(--tab-size-preference); }
```

--------------------------------

### Apply ZoomIn Animation

Source: https://usal.dev/

Shows how to apply a 'zoomin' animation, scaling an element from 60% to 100%.

```html
<div data-usal="zoomin">Scale from 60% to 100%</div>
```

--------------------------------

### HTML Data Attributes for Animation Tuning

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Demonstrates how to use HTML data attributes to apply various animation tuning parameters. This includes default animations, subtle adjustments, dramatic effects, complex multi-value tuning, and different flip variations.

```HTML
<div data-usal="fade">Default 25% movement</div>
```

```HTML
<div data-usal="fade-10">Subtle 10% movement</div>
```

```HTML
<div data-usal="zoomin">Default 25% intensity</div>
```

```HTML
<div data-usal="zoomin-75">Dramatic 75% intensity</div>
```

```HTML
<div data-usal="fade-dr-60-40">Diagonal fade (X: 60%, Y: 40%)</div>
```

```HTML
<div data-usal="zoomout-20-30-70">Complex zoom (X: 20%, Y: 30%, intensity: 70%)</div>
```

```HTML
<div data-usal="flip">Default 90° angle, 25rem perspective</div>
```

```HTML
<div data-usal="flip-180-50">Full flip, deeper perspective</div>
```

```HTML
<div data-usal="flip-udlr-120-80">Multi-direction flip, custom angle and perspective</div>
```

--------------------------------

### Opacity Auto-Clamping

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Illustrates how opacity values outside the 0-100 range are automatically clamped. Negative values become 0, and values greater than 100 are capped at 100.

```HTML
<!-- Same as o+0 (negative becomes 0) -->
<div data-usal="line-[o-50]">Same as o+0 (negative becomes 0)</div>
<!-- Same as o+100 (clamped to max) -->
<div data-usal="line-[o+150]">Same as o+100 (clamped to max)</div>
```

--------------------------------

### GitHub Copilot Configuration JSON

Source: https://github.com/italoalmeida0

This JSON object contains configuration settings for GitHub Copilot, including a list of enabled feature flags and an override URL for the Copilot API. These settings control various aspects of Copilot's functionality and behavior.

```json
{"locale":"en","featureFlags":["alternate_user_config_repo","api_insights_show_missing_data_banner","attestations_filtering","attestations_sorting","client_version_header","codespaces_prebuild_region_target_update","contact_requests_implicit_opt_in","contentful_lp_enterprise","contentful_lp_footnotes","copilot_agent_task_caching","copilot_api_agentic_issue_marshal_yaml","copilot_api_draft_issue_with_mixed_trees","copilot_chat_attach_multiple_images","copilot_chat_file_redirect","copilot_chat_group_notifications","copilot_chat_no_header","copilot_chat_reduce_quota_checks","copilot_chat_search_bar_redirect","copilot_chat_vision_in_claude","copilot_chat_vision_skip_thread_create","copilot_coding_agent_diff_stats","copilot_custom_copilots_feature_preview","copilot_custom_copilots_images","copilot_duplicate_thread","copilot_features_raycast_logo","copilot_free_to_paid_telem","copilot_ftp_hyperspace_upgrade_prompt","copilot_ftp_settings_upgrade","copilot_ftp_upgrade_to_pro_from_models","copilot_ftp_your_copilot_settings","copilot_global_overlay_v2","copilot_immersive_agent_branch_selection","copilot_immersive_draft_issue_tree","copilot_immersive_structured_model_picker","copilot_loops_share_button","copilot_no_floating_button","copilot_read_shared_conversation","copilot_spaces_input_menu_select","copilot_spark_allow_empty_commit","copilot_spark_single_user_iteration","copilot_spark_use_billing_headers","copilot_spark_write_iteration_history_to_git","copilot_stable_conversation_view","copilot_task_oriented_assistive_prompts","copilot_workbench_agent_seed_tool","copilot_workbench_cache","copilot_workbench_connection_reload_banner","copilot_workbench_preview_analytics","copilot_workbench_ratelimit_fallback","copilot_workbench_refresh_on_wsod","copilot_workbench_synthetic_generation","custom_copilots_capi_mode","dashboard_public_preview","direct_to_salesforce","dotcom_chat_client_side_skills","failbot_report_error_react_apps_on_page","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","global_search_multi_orgs","hpc_improve_dom_insertion_observer","hyperspace_diff_view","insert_before_patch","issue_fields_report_usage","issues_preserve_tokens_in_urls","issues_react_blur_item_picker_on_close","issues_react_bots_timeline_pagination","issues_react_prohibit_title_fallback","issues_react_remove_placeholders","lifecycle_label_name_updates","link_contact_sales_swp_marketo","loops_versioning","marketing_pages_search_explore_provider","mcp_registry_all_featured_cards","memex_mwl_filter_field_delimiter","migrate_toasts_to_banners_web_notifications","new_insights_rulesets_filter","new_traffic_page_banner","override_pulse_legacy_url","primer_react_segmented_control_tooltip","primer_react_unified_portal_root","record_sso_banner_metrics","releases_update_ref_selector","remove_child_patch","repos_insights_remove_new_url","sample_network_conn_type","scheduled_reminders_updated_limits","show_edit_on_default_option","site_homepage_contentful","site_msbuild_webgl_hero","spark_commit_on_default_branch","spark_sync_repository_after_iteration","viewscreen_sandbox","webp_support","workbench_default_sonnet4","workbench_store_readonly"]}
```

--------------------------------

### USAL.js Lit Integration

Source: https://usal.dev/

Details on how USAL.js integrates with Lit, noting its global auto-initialization.

```javascript
import { usal } from '@usal/lit';
// USAL auto-initializes globally
```

--------------------------------

### Flip Animations

Source: https://github.com/italoalmeida0/usal/wiki/API-Summary

Provides CSS classes for flip animations, supporting direction, angle, and perspective.

```CSS
flip
flip-{direction} // u, d, l, r, ul, ur, dl, dr
flip-{angle} // degrees angle
flip-{angle}-{perspective} // degrees angle, rem perspective
flip-{direction}-{angle} // direction + degrees angle
flip-{direction}-{angle}-{perspective} // direction + degrees angle, rem perspective
```

--------------------------------

### Text Effects

Source: https://github.com/italoalmeida0/usal/wiki/API-Summary

Provides CSS classes for text shimmer and fluid text effects.

```CSS
text-shimmer
text-fluid
```

--------------------------------

### 3D Flip Sequence Animation

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Showcases a 3D flip animation sequence using perspective, rotation (rx, ry), and scale properties across multiple keyframes. The order of transformations is crucial for the visual effect.

```HTML
<div data-usal="line-[
  p+100 rx+0 ry+0 sx+0.3 sy+0.3 |
  25 rx+90 sx+0.6 sy+0.6 |
  50 rx+180 ry+90 sx+1 sy+1 |
  75 rx+270 ry+180 |
  rx+360 ry+360
]">
  3D flip sequence
</div>
```

--------------------------------

### USAL.js React Integration

Source: https://usal.dev/

Setting up USAL.js within a React application using the USALProvider component.

```jsx
import { USALProvider } from '@usal/react';
<USALProvider>{children}</USALProvider>
```

--------------------------------

### Keyframe Rules: Multiple Pipes

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Multiple pipes enable multi-step animations. The syntax uses auto-copy behavior where a keyframe's value is copied to subsequent keyframes if not explicitly defined.

```HTML
<!-- 0%: opacity 0.3 (copy of 40%), 40%: opacity 0.3, 100%: opacity 0.7 -->
<div data-usal="line-[|40o+30|o+70]">Two pipes</div>

<!-- 0%: opacity 0.1 (copy of 20%), 20%: opacity 0.1, 50%: opacity 0.6, 70%: opacity 0.8, 100%: opacity 0.8 (copy of 70%) -->
<div data-usal="line-[|20o+10|50o+60|70o+80]">Multi-step fade</div>
```

--------------------------------

### Configure GitHub Copilot API Override URL

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

This snippet demonstrates how to configure the GitHub Copilot API override URL. It's useful for directing Copilot requests to a specific API endpoint, potentially for testing or custom integrations.

```json
{"locale":"en","featureFlags":["alternate_user_config_repo","api_insights_show_missing_data_banner","attestations_filtering","attestations_sorting","client_version_header","codespaces_prebuild_region_target_update","contact_requests_implicit_opt_in","contentful_lp_enterprise","contentful_lp_footnotes","copilot_agent_task_caching","copilot_api_agentic_issue_marshal_yaml","copilot_api_draft_issue_with_mixed_trees","copilot_chat_attach_multiple_images","copilot_chat_file_redirect","copilot_chat_group_notifications","copilot_chat_no_header","copilot_chat_reduce_quota_checks","copilot_chat_search_bar_redirect","copilot_chat_vision_in_claude","copilot_chat_vision_skip_thread_create","copilot_coding_agent_diff_stats","copilot_custom_copilots_feature_preview","copilot_custom_copilots_images","copilot_disable_generated_commit_description","copilot_duplicate_thread","copilot_features_raycast_logo","copilot_free_to_paid_telem","copilot_ftp_hyperspace_upgrade_prompt","copilot_ftp_settings_upgrade","copilot_ftp_upgrade_to_pro_from_models","copilot_ftp_your_copilot_settings","copilot_global_overlay_v2","copilot_immersive_agent_branch_selection","copilot_immersive_draft_issue_tree","copilot_immersive_structured_model_picker","copilot_loops_share_button","copilot_no_floating_button","copilot_read_shared_conversation","copilot_spaces_input_menu_select","copilot_spark_allow_empty_commit","copilot_spark_single_user_iteration","copilot_spark_use_billing_headers","copilot_spark_write_iteration_history_to_git","copilot_stable_conversation_view","copilot_task_oriented_assistive_prompts","copilot_workbench_agent_seed_tool","copilot_workbench_cache","copilot_workbench_connection_reload_banner","copilot_workbench_preview_analytics","copilot_workbench_ratelimit_fallback","copilot_workbench_refresh_on_wsod","copilot_workbench_synthetic_generation","custom_copilots_capi_mode","dashboard_public_preview","direct_to_salesforce","dotcom_chat_client_side_skills","failbot_report_error_react_apps_on_page","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","global_search_multi_orgs","hpc_improve_dom_insertion_observer","hyperspace_diff_view","insert_before_patch","issue_fields_report_usage","issues_preserve_tokens_in_urls","issues_react_blur_item_picker_on_close","issues_react_bots_timeline_pagination","issues_react_prohibit_title_fallback","issues_react_remove_placeholders","lifecycle_label_name_updates","link_contact_sales_swp_marketo","loops_versioning","marketing_pages_search_explore_provider","mcp_registry_all_featured_cards","memex_mwl_filter_field_delimiter","migrate_toasts_to_banners_web_notifications","new_insights_rulesets_filter","new_traffic_page_banner","override_pulse_legacy_url","primer_react_segmented_control_tooltip","primer_react_unified_portal_root","record_sso_banner_metrics","releases_update_ref_selector","remove_child_patch","repos_insights_remove_new_url","sample_network_conn_type","scheduled_reminders_updated_limits","show_edit_on_default_option","site_homepage_contentful","site_msbuild_webgl_hero","spark_commit_on_default_branch","spark_sync_repository_after_iteration","viewscreen_sandbox","webp_support","workbench_default_sonnet4","workbench_store_readonly"],"copilotApiOverrideUrl":"https://api.githubcopilot.com"}
```

--------------------------------

### USAL.js Svelte Integration

Source: https://usal.dev/

Information on how USAL.js auto-initializes globally when used with Svelte.

```javascript
import { usal } from '@usal/svelte';
// USAL auto-initializes globally
```

--------------------------------

### CSS Variables for Tab Size

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

This CSS snippet defines a root variable for tab size preference and applies it to pre and code elements. This ensures consistent tab rendering across the documentation.

```css
:root { --tab-size-preference: 4; } pre, code { tab-size: var(--tab-size-preference); }
```

--------------------------------

### Configure USAL Easing Functions via JavaScript

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Applies CSS easing functions to USAL animations. Supports standard easing keywords and custom cubic-bezier functions for precise animation control.

```JavaScript
// Any valid CSS easing function
window.USAL.config({
  defaults: {
    easing: 'ease-in-out',
    // or
    easing: 'linear',
    // or custom cubic-bezier
    easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
  },
});
```

--------------------------------

### Include USAL.js via CDN

Source: https://usal.dev/

How to include the USAL.js library directly in an HTML file using a CDN link.

```html
<script src="https://cdn.usal.dev/latest"></script>
```

--------------------------------

### Easing Functions in USAL

Source: https://usal.dev/

Explains how to control animation acceleration using preset and custom easing functions in USAL.

```css
// Preset easing
linear, ease, ease-in, ease-out

// Custom easing with easing-[value]
easing-[cubic-bezier(0.4,0,0.2,1)]
easing-[steps(10, jump-both)]
```

--------------------------------

### Configure USAL.js API

Source: https://context7_llms

This snippet shows how to configure the USAL.js library using the `window.USAL.config` method. It allows setting default animation properties like type, direction, duration, and easing, as well as observer-related settings.

```javascript
window.USAL.config({
  defaults: {
    animation: 'fade',
    direction: 'u',
    duration: 1000,
    delay: 0,
    threshold: 10,
    splitDelay: 30,
    easing: 'ease-out',
    blur: false,
    loop: 'mirror'
  },
  observersDelay: 50,
  once: false
});
```

--------------------------------

### Custom Timeline

Source: https://github.com/italoalmeida0/usal/wiki/API-Summary

Allows defining custom animation timelines using pipe-separated properties.

```CSS
line-[{timeline properties}] // properties separated by pipe
```

--------------------------------

### Initialize Custom USAL Library

Source: https://usal.dev/

Checks if the custom USAL library and its 'init' method are available in the global scope and calls the 'init' method if they exist.

```javascript
if (typeof window.USAL !== 'undefined' && window.USAL.init) {
  window.USAL.init();
}
```

--------------------------------

### Configure USAL Defaults via JavaScript

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Initializes or reconfigures USAL with custom default animation settings. This includes animation type, direction, duration, delay, threshold, easing, blur, and loop behavior.

```JavaScript
window.USAL.config({
  defaults: {
    animation: 'fade', // Default animation type
    direction: 'u', // Default direction (u, d, l, r, ul, ur, dl, dr)
    duration: 1000, // Animation duration (ms)
    delay: 0, // Animation delay (ms)
    threshold: 10, // Viewport threshold for trigger (%)
    splitDelay: 30, // Delay between split items (ms)
    easing: 'ease-out', // CSS easing function
    blur: false, // Enable/disable blur effect (false, true, or numeric value in rem - default: 0.625rem when true)
    loop: 'mirror',  // Default loop type (mirror, jump)
  },
  observersDelay: 50, // Delay for observers (ms)
  once: false, // Run animation only once
});
```

```JavaScript
// Get current configuration
const currentConfig = window.USAL.config();
```

```JavaScript
// Reconfigure at any time
window.USAL.config({
  defaults: {
    duration: 2000,
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
    blur: 0.8,
  },
  once: true,
});
```

```JavaScript
// Partial updates work too
window.USAL.config({
  defaults: {
    animation: 'zoomin',
    direction: 'l',
  },
});
```

--------------------------------

### Timeline Property Reference

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Provides a reference for animation properties and their syntax, including opacity (o), scale (s, sx, sy, sz), translate (t, tx, ty, tz), rotate (r, rx, ry, rz), blur (b), and perspective (p). Values can be positive or negative, and keyframes are separated by '|'.

```Text
Properties (case-insensitive): o (opacity), s/sx/sy/sz (scale), t/tx/ty/tz (translate), r/rx/ry/rz (rotate), b (blur), p (perspective)
Values: + or - followed by number
Keyframes: Use | to separate, with optional percentage prefix
Formatting: Spaces and line breaks are allowed for better organization

Property Reference:
o±value: Opacity (0-100, auto-clamped, divided by 100)
s±value: Scale (X and Y axes)
sx±value: ScaleX only
sy±value: ScaleY only
sz±value: ScaleZ only
t±value: Translate (X only, %)
tx±value: TranslateX (%)
ty±value: TranslateY (%)
tz±value: TranslateZ (%)
r±value: Rotate (Z-axis, degrees)
rx±value: RotateX (degrees)
ry±value: RotateY (degrees)
rz±value: RotateZ (degrees)
b±value: Blur (rem, negatives become 0)
p±value: Perspective (rem)
```

--------------------------------

### Basic Animations in USAL

Source: https://usal.dev/

Demonstrates the core animation types available in USAL, including fade and zoom effects in various directions.

```css
// Basic animations
fade, fade-u, fade-d, fade-l, fade-r
fade-ul, fade-ur, fade-dl, fade-dr

// Zoom in animations
zoomin, zoomin-u, zoomin-d, zoomin-l, zoomin-r
zoomin-ul, zoomin-ur, zoomin-dl, zoomin-dr

// Zoom out animations
zoomout, zoomout-u, zoomout-d, zoomout-l, zoomout-r
zoomout-ul, zoomout-ur, zoomout-dl, zoomout-dr

// Flip animations
flip, flip-u, flip-d, flip-l, flip-r
flip-ul, flip-ur, flip-dl, flip-dr
```

--------------------------------

### Handle Initial Page Load with Hash

Source: https://usal.dev/

Checks the URL hash on initial page load. If a hash exists and corresponds to an element on the page, it calls the 'showSection' function to display that section.

```javascript
const initialHash = window.location.hash.substring(1);
if (initialHash && document.getElementById(initialHash)) {
  showSection(initialHash);
}
```

--------------------------------

### Control USAL.js API Methods

Source: https://context7_llms

This snippet demonstrates essential control methods for the USAL.js library. It includes functions to check if the library is initialized, restart its processes, shut it down, and access its version number.

```javascript
// Check if running (auto initialized)
window.USAL.initialized()

// Restart USAL, use only extreme cases, the system is reactive even in shadowRoot
window.USAL.restart()

// Shut down, use only extreme cases, the system is reactive even in shadowRoot
window.USAL.destroy()

// Get version
window.USAL.version
```

--------------------------------

### USAL Split Animations

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

Utilizes USAL's split animations to divide content into parts (words, letters, items) and apply animations with customizable delays and stagger effects.

```html
<h1 data-usal="split-word fade-u">Hello World</h1>
<h1 data-usal="split-letter zoomin">USAL.js</h1>
<p data-usal="split-word fade-r split-delay-100">Animated paragraph</p>
<ul data-usal="split-item flip-l">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

--------------------------------

### Keyframe Rules: One Pipe

Source: https://github.com/italoalmeida0/usal/wiki/API-Documentation

With a single pipe, the animation transitions FROM the original state TO the specified value. An optional percentage can define the keyframe point.

```HTML
<!-- 0%: original, 100%: opacity 0.2 -->
<div data-usal="line-[|o+20]">Fade to 20%</div>

<!-- With percentage: 0%: original, 60%: opacity 0.4, 100%: opacity 0.4 -->
<div data-usal="line-[|60o+40]">Fade at 60%</div>
```

--------------------------------

### USAL.js Solid Integration

Source: https://usal.dev/

Integrating USAL.js into a Solid.js application, typically using the USALProvider component.

```jsx
import { USALProvider } from '@usal/solid';
<USALProvider>{props.children}</USALProvider>
```

--------------------------------

### Linear Easing Animation

Source: https://usal.dev/

Applies a 'zoomin' animation using 'linear' easing.

```html
<div data-usal="zoomin linear">Linear easing</div>
```