Documentation
  • ABLE - Design System
  • Structure
  • Themes
    • Styles
      • Ω Color Style
      • Ω Text Style
      • Ω Effect Style
      • Ω Size Dictionary
      • Ω Spacing Dictionary
      • Ω Motion Library
      • Ω Haptic Library
      • Ω Audio Library
      • Ω Time Dictionary
      • Ω Interaction Dictionary
    • Ω Icon Library
    • Ω Illustration Library
    • Ω Brand Library
  • Core
    • ε Elements
      • ε AdaptIcon
        • Θ AdaptIconBar
        • Ω AdaptIconShape
      • ε Avatar
        • Θ AvatarBar
        • Ω AvatarShape
      • Φ Badge
        • Θ Badge - Usecase
      • ε Button
        • Θ ButtonBar
      • Φ CheckboxCtrl
        • Ω CheckboxShape
      • ε Chip
        • ε ChipBar
        • Φ ChipModal
      • Φ Divider
      • ε FAB
        • Ω FABShape
      • ε Field
        • Θ FormFieldLabel
        • Θ FormFieldHelper
        • Θ FieldContainer
        • Θ FieldContent
        • Ω FieldShape
      • ε Graphic
        • ε Illustration (Canvas)
        • Θ GraphicBar
        • Θ Graphic - Status
        • ε Overlay
          • Φ OL - AdaptIcon
          • Φ OL - Avatar
          • Φ OL - Button
          • Φ OL - Icon
          • Φ OL - Sash
          • Φ OL - Stepper
          • Φ OL - Banner
          • Φ OL - Headline
      • Φ Icon
      • ε InputStepperCtrl
        • Φ InputStepperPieces
      • ε Label
      • ε ProgressCtrl
        • Φ ProgressBar
      • Φ RadioBtnCtrl
        • Ω RadioBtnShape
      • ε RatingCtrl
        • Φ RatePoint
        • Ω RatePointShape
      • ε SliderCtrl
        • Φ SliderBar
          • Ω SliderIndicator
          • Ω SliderKnob
          • Ω SliderTrack
          • Φ RulerTrack
            • Ω RulerTic
      • ε Snackbar
      • ε Paginator
        • Φ PagePoint
        • Ω PagePointShape
      • Φ SwitchCtrl
        • Ω SwitchShape
      • Φ Tab
        • Ω TabActive
      • ε ToggleCtrl
        • ε ToggleBar
        • Φ ToggleBtn
        • ε NavToggle
      • ε Tooltip
      • ε Caption
        • Θ Caption - Description
        • Θ Caption - Support
        • Θ Caption - Title
        • Θ CC - Leading
        • Θ CC - Primary
        • Θ CC - Trailing
    • Components
      • App Bar
        • Θ ABC - Leading
        • Θ ABC - Center
        • Θ ABC - Trailing
        • Θ ABC - Pieces
        • Θ AppBarExt
        • NavTab
      • Bullet
      • Button Panel
      • Content Bar
      • Form
        • Checkbox
        • ChipList
        • Input Stepper
        • Picker
          • PickView
        • Radio Button
        • Rate
        • SelectList
        • Slider
        • Switch
        • TextArea
        • Textfield
        • Toggle Button
        • UserList
        • FC - Leading
        • FC - Trailing
      • Headline
      • ListItem
        • Θ LIC - Leading
        • Θ LIC - Primary
        • Θ LIC - Trailing
      • Menu
        • Θ MC - Leading
        • Θ MC - Primary
        • Θ MC - Trailing
      • Modal
      • Paragraph
      • Section Header
      • Sheet
        • Sheet Drag
        • Sheet - Content
        • Sheet - Footer
      • Paginator Panel
      • TabBar
    • Ξ Modules
      • CardView
        • CardBar
        • CardItem
      • GridView
      • Hero
      • ListView
      • MasonryView
  • Actions
  • Contributing
    • Code of Conduct
Powered by GitBook
On this page
  • Resources
  • Properties
  1. Themes
  2. Styles

Ω Haptic Library

PreviousΩ Motion LibraryNextΩ Audio Library

Last updated 9 months ago

Haptic feedback is the use of touch to communicate with users. It's the vibration of your phone when you get a new email or the rumble in the controller when a hit happens in a game.

Resources

These resources are stored in the snippets library as pieces of code that can be used across the application and referenced through the token assigned to it in the snippets library.

To get a better feel of testing haptic and vibration patterns, here are some helpful resources and apps:

Properties

Name: [textField] The human readable way we refer to this "Haptic" feedback in the dictionary

Type: [selectList()] The categories we set up for the different types of haptic responses

Resource: [searchList(haptic.Type)] Every haptic feedback will have a source file that it references to provide the code for the feedback this is the location of that snippet of code needed to preform the desired response

Metaphor: [textField] Every haptic feedback response acts as a metaphor for something. Some responses can carry multiple metaphors (i.e. "success" and "win" for a positive result) This allows us to reuse these feedback metaphors as a design token which is referenced throughout our components while all referencing the same file.

Token: [textField] The short-code we use to refer to this metaphor (i.e.. #haptWin, #haptError, #haptWarn, etc.)

— A true vibration spectrum analyzer using the built in accelerometers and gyroscope inside the iPod Touch and the iPhone.

— Compose and play haptic patterns to customize your iOS app’s haptic feedback.

(For Design) — Haptic guidelines to enhance interactions and convey useful information to users through the sense of touch.

— Constants to be used to perform haptic feedback effects on Android devices.

) — Explore haptic patterns generated by Apple’s Tactic Engine (by Jesus Guerra)

Vibration App
Core Haptics (For Devs)
Android Haptics
Android Haptic Constants (For Devs)
Haptic Feedback Generators (For Devs
npm: react-native-haptic-feedbacknpm
npm: expo-hapticsnpm
Logo
Logo