---
title: "Immersive feedback atom | GoodBarber Design System"
description: "The immersive feedback atom adds a sensory layer of haptic and motion reactions to user actions, for a complete and tangible app experience."
canonical_url: "https://www.goodbarber.com/uxdesign/atom-immersive-feedback/"
lang: pt
---

# Immersive feedback atom | GoodBarber Design System

[Design System](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://pt.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Immersive feedback atom

Atomic Components

Adds a sensory layer of haptic and motion reactions to user actions, making the app feel tactile and responsive.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom-immersive-feedback.786675acd25c.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom-immersive-feedback.786675acd25c.mp4)

![](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-immersive_feedbacks.c9bbca16de87.png)

## Introduction

The immersive feedback atom adds a sensory layer to the app: it plays haptic and motion reactions to user actions, so the interface feels tactile and responsive. It enriches the primary feedback, never replaces it.

### Channels

Two additive channels:

- **Haptic**: vibration patterns, mapped to the native iOS and Android feedback.
- **Motion**: a per-action animation, on iOS, Android and the Progressive Web App.

### How it works

- Immersive feedback can be activated globally in one click, or per view, from the *Effects & Animations* panel.
- Reactions are chosen by action category: Navigation, Selection, Confirmation, Success, Warning and Error.
- An intensity level (minor, medium, major) sets the strength of each reaction.

### JSON

Immersive feedback object :

```
{

 "hapticRef": "KEY OF HAPTIC FEEDBACK OBJECT",

 "hapticEnabled": BOOL,

 "motion": MOTION FEEDBACK OBJECT,

 "motionEnabled": BOOL

}
```

Haptic feedback object :

```
{

 "hapticPatterniOS": STRING, // ex: light_impact

 "hapticPatternAndroid": STRING // ex: CLOCK_TICK

}
```

Motion object :

```
{

 "media": {

  "image": IMAGE OBJECT,

  "lottie": LOTTIE OBJECT,

  "type": "image | lottie" // Default: image

 }

}
```